@charset "UTF-8";
.page_user .el-button,
#app .diy_details_box .details_btn,
.submit_button,
#app .diy_edit .warp .container > .row .btn_box .btn_submit,
#app .page_user .warp .container .row .card_password .password_confim .btn_item,
.btn_save, .face-login .face-img .el-button, #app .page_account .form_box .btns_bottom .btn_item, .page_cart .warp .container .card .cart_block .bar_settle .btn_settle, .page_cart .warp .container .col .delet, .page_user .card_info .div_info .right_msg .btn, .page_user .user_bg.col-md-9 .card_default .user_block .log_out .btn.btn-info, .page_user .user_bg.col-md-9 .card_default .user_block .log_out .btn:nth-child(1), .page_user .card_address .list_address .btn_address, .page_user .card_address .list_address .address_card .address_info .address_content .tag .tag_default, .page_goods.goods_det .card_div_goods .card_goods_info .price_b .bottom_handle .buy:nth-child(2), .page_message .form_message .btns_bottom .btn_item, .page_message .card_message button, .page_forum .container .row .card_forum_list .search_box > .add_forum, .page_header .conton-top .user .ml {
background-color: #ff9500;
}
.page_user .el-button:hover,
#app .diy_details_box .details_btn:hover,
.submit_button:hover,
#app .diy_edit .warp .container > .row .btn_box .btn_submit:hover,
#app .page_user .warp .container .row .card_password .password_confim .btn_item:hover,
.btn_save:hover, .face-login .face-img .el-button:hover, #app .page_account .form_box .btns_bottom .btn_item:hover, .page_cart .warp .container .card .cart_block .bar_settle .btn_settle:hover, .page_cart .warp .container .col .delet:hover, .page_user .card_info .div_info .right_msg .btn:hover, .page_user .user_bg.col-md-9 .card_default .user_block .log_out .btn.btn-info:hover, .page_user .user_bg.col-md-9 .card_default .user_block .log_out .btn:hover:nth-child(1), .page_user .card_address .list_address .btn_address:hover, .page_user .card_address .list_address .address_card .address_info .address_content .tag .tag_default:hover, .page_goods.goods_det .card_div_goods .card_goods_info .price_b .bottom_handle .buy:hover:nth-child(2), .page_message .form_message .btns_bottom .btn_item:hover, .page_message .card_message button:hover, .page_forum .container .row .card_forum_list .search_box > .add_forum:hover, .page_header .conton-top .user .ml:hover {
  background-color: #ff9500;
  filter: brightness(1.1);
}

#app .page_order .card_order .goods_list .item_goods .middle_info .title, #app .page_order .card_goods_list .list_order .goods_list .item_goods .middle_info .description, #app .page_order .card_goods_list .list_order .goods_list .item_goods .middle_info .title, .page_user .user_right_box .list_collect .item_collect .collect_box .right_block .top_comment .title, .diy_list .diy_list_container .diy_list_box .diy_view_list .diy_list_box_wrap .diy_list_item_box .diy_row .diy_text, .diy_list .diy_list_box_wrap .diy_list_item_content .diy_row .diy_text, .diy_list .goods .diy_list_item_content .diy_row .diy_text, .diy_list .diy_list_box_wrap .diy_list_item_content .diy_row .diy_title, .diy_list .goods .diy_list_item_content .diy_row .diy_title, .page_article .div_article .title, .page_notice .notice_list .notice_block .notice_title, .page_forum .container .row .card_forum_list .list_forum .item_forum .right_block .bottom .time, .page_forum .container .row .card_forum_list .list_forum .item_forum .right_block .top, .page_goods .card_aside .list .goods .goods_nav .good_bottom .title, .page_goods .page_goods_list_hot .list .goods .goods_nav .good_bottom .title, .page_goods .page_goods_list_wrap .page_goods_list_base .card_goods_list .list_goods .goods .doc a .title, .page_root .product .list_goods .lis_cont .title, .comment_box .list_comment .item_comment_box .right_block .top_comment .nickname {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#app .page_pay .coupon_box, #app .page_order .card_order, .page_user .card_info, .page_user .card_address .list_address .address_card .bar_btn, .page_user .card_address, .page_user .user_right_box, .page_user .card_addres .table_wrap, .page_goods.goods_det .card_bottom_goods, #app .diy_details .review, #app .diy_details .diy_details_box .rich_text, #app .diy_details .diy_details_box .row_top_wrap .row_1 .diy_img, .diy_list .diy_list_box_wrap:hover, .diy_list .goods:hover, .page_message .card_message .list_message, .page_article .comments-wrap .review, .page_notice.notice-detail .notice_list .notice_content, .page_exam .exam-detail, #app .page_forum .warp .container .forum-detail-comment, #app .page_forum .warp .container .row .card .forum_detail .div_forum, #app .page_search .card_result_search {
  box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1);
}

.page_goods.goods_det .card_div_goods .card_goods_info .price_b .bottom_handle {
  *zoom: 1;
}
.page_goods.goods_det .card_div_goods .card_goods_info .price_b .bottom_handle:after {
  content: "";
  display: block;
  clear: both;
  height: 0;
}

.page_forum .container .row .card_forum_list .list_forum .item_forum .right_block .bottom .time:before, .banner .sw_no .swiper_img .carousel .carousel-control-prev:hover .carousel-control-next-icon,
.banner .sw_no .swiper_img .carousel .carousel-control-prev:hover .carousel-control-prev-icon, .banner .sw_no .swiper_img .carousel .carousel-control-next:hover .carousel-control-next-icon,
.banner .sw_no .swiper_img .carousel .carousel-control-next:hover .carousel-control-prev-icon {
  filter: grayscale(100%) brightness(100);
}

@font-face {
  font-family: "DINCondensedBold";
  font-weight: normal;
  font-style: normal;
  src: url("../img/font/DIN_Condensed_Bold.ttf") format("truetype");
}
@font-face {
  font-family: "DIN-Bold";
  font-weight: normal;
  font-style: normal;
  src: url("../img/font/DIN_Bold.eot");
  src: url("../img/font/DIN_Bold.eot?#iefix") format("embedded-opentype"), url("../img/font/DIN_Bold.ttf") format("truetype");
}
@font-face {
  font-family: "Bebas-Regular";
  font-weight: normal;
  font-style: normal;
  src: url("../img/font/Bebas-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "PangMenZhengDaoBiao";
  font-weight: normal;
  font-style: normal;
  src: url("../img/font/PangMenZhengDaoBiao.ttf") format("truetype");
}
body {
  margin: 0;
  font: 14px/1.6 Arial;
  color: #1a2535;
}

input, textarea, select {
  margin: 0;
  padding: 0;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  resize: none;
}

html:root body {
  font-family: "Pingfang SC", "Microsoft Yahei", Arial;
  -webkit-font-smoothing: subpixel-antialiased;
}

form, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, p {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  text-decoration: none;
  outline: none;
}
a img {
  border: none;
}

i, em {
  font-style: normal;
}

s, u {
  text-decoration: none;
}

button {
  cursor: pointer;
}
button i {
  font-size: 0;
}

table {
  border-spacing: 0;
  border-collapse: collapse;
}

::-moz-placeholder {
  color: #afb3b9;
}

::placeholder {
  color: #afb3b9;
}

/*--------------------------------------------------全局样式---------------------------------------------------------------------*/
::-webkit-datetime-edit-year-field {
  color: #38f;
}

::-webkit-datetime-edit-month-field {
  color: #26d2ff;
}

::-webkit-datetime-edit-day-field {
  color: #04BE02;
}

::-webkit-inner-spin-button {
  visibility: hidden;
}

::-webkit-calendar-picker-indicator {
  background-color: #eee;
  background-image: 0;
  border: 1px solid rgba(125, 125, 125, 0.25);
  border-radius: 0.25rem;
  box-shadow: inset 0 1px #fff, 0 1px #eee;
  color: #666;
}

#app :is(.page_notice, .page_forum, .exam_list, .subject_list, .page_message, #cart_index, #order_list, .collect_list, .diy_edit, .diy_list, #user_address) .warp {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: revert;
}

@media screen and (max-width: 988px) {
  /* 小于等于 768px 屏幕宽度时的样式 */
  .page_footer {
    width: 100vh;
    transform: translateX(71px);
  }
}
::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

@media (min-width: 576px) {
  ::-webkit-scrollbar-track-piece {
    background-color: #f8f8f8;
  }
  ::-webkit-scrollbar {
    width: 0.5rem;
    height: 0.5rem;
  }
  ::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.5);
    background-clip: padding-box;
    min-height: 1rem;
    border-radius: 0.5rem;
  }
}
:root {
  --color_red: #FF0036;
  --color_orange: #fca216;
  --color_yellow: #fcca16;
  --color_green: #09BB07;
  --color_cyan: #26d2ff;
  --color_blue: #38f;
  --color_purple: #7f39e8;
  --color_black: #373737;
  --color_white: #fff;
  --color_grey: #6a737d;
  --color_light: #F9F9F9;
  --color_dark: #666;
  --color_error: #FF0036;
  --color_error_b: #d10000;
  --color_error_h: #ff3237;
  --color_warning: #fca216;
  --color_warning_b: #ff8250;
  --color_warning_h: #fca248;
  --color_success: #09BB07;
  --color_success_b: #2F9833;
  --color_success_h: #3bbb39;
  --color_info: #26d2ff;
  --color_info_b: #15baf8;
  --color_info_h: #58e6ff;
  --color_primary: #ffffff;
  --color_primary_b: #317EF3;
  --color_primary_h: #FDF6E3;
  --color_default: #666;
  --color_default_b: #444;
  --color_default_h: #999;
  --color_base: #373737;
  --color_title: #000;
  --color_subtitle: #373737;
  --color_describe: #666;
  --color_paragraph: #666;
  --color_tip: #6a737d;
  --color_border: #dfe2e5;
  --color_mask: rgba(0, 0, 0, 0.4);
  --color_shadow: rgba(7, 17, 27, 0.1);
  --bg_black: #24292e;
  --bg_grey: #efeff4;
  --bg_white: #FDFDFD;
  --opacity_disabled: 0.7;
  --line_red: linear-gradient(135deg, #FF5A6A 0%, #f12f04 100%);
  --line_yellow: linear-gradient(135deg, rgb(252, 207, 49) 24px%, rgb(245, 85, 85) 100%);
  --line_green: linear-gradient(135deg, rgb(255, 247, 32) 24px%, rgb(60, 213, 0) 100%);
  --line_blue: linear-gradient(135deg, rgb(94, 252, 232) 24px%, rgb(115, 110, 254) 100%);
  --line_purple: linear-gradient(135deg, #EE9AE5 24px%, #5961F9 100%);
  --line_red-1: linear-gradient(135deg, #fffddc 0%, #ff4c4c 20%, #fa2aa4 100%);
  --line_red-2: linear-gradient(135deg, #ffe7dc 0%, #ff7a4c 20%, #fa2a7d 100%);
  --line_yellow-1: linear-gradient(135deg, #ffe4dc 0%, #faa02a 20%, #ff4c5d 100%);
  --line_yellow-2: linear-gradient(135deg, #fffadc 0%, #faf32a 20%, #ff7f4c 100%);
  --line_green-1: linear-gradient(135deg, #dcf9ff 0%, #e8ff4c 20%, #2afac2 100%);
  --line_green-2: linear-gradient(135deg, #fff7dc 0%, #4cff6e 20%, #46c4fe 100%);
  --line_blue-1: linear-gradient(135deg, #dcfff9 0%, #2afadf 20%, #4c83ff 100%);
  --line_blue-2: linear-gradient(135deg, #dcffe0 0%, #2accfa 20%, #b14cff 100%);
  --line_purple-1: linear-gradient(135deg, #ffe8dc 0%, #ff4cb5 20%, #cc2afa 100%);
  --line_purple-2: linear-gradient(135deg, #ffe8dc 0%, #ec4cff 20%, #652afa 100%);
  --font_family_number: "Helvetica Neue", helvetica;
  --font_family_text: arial, sans-serif;
  --font_mini: 0.75rem;
  --font_small: 0.875rem;
  --font_base: 1rem;
  --font_big: 1.25rem;
  --font_larger: 1.5rem;
  --font_huge: 1.75rem;
  --font_title: 1.25rem;
  --font_subtitle: 1rem;
  --font_describe: 1rem;
  --font_paragraph: 1rem;
  --font_tip: 0.75rem;
  --img_size_mini: 1.5rem;
  --img_size_small: 2rem;
  --img_size_base: 3rem;
  --img_size_big: 4.5rem;
  --img_size_larger: 6rem;
  --img_size_huge: 8rem;
  --radius_small: 0.25rem;
  --radius_base: 0.5rem;
  --radius_big: 1rem;
  --radius_circle: 50%;
  --height_mini: 1rem;
  --height_small: 1.5rem;
  --height_base: 2rem;
  --height_big: 2.5rem;
  --height_larger: 3rem;
  --row_mini: 0.25rem;
  --row_small: 0.5rem;
  --row_base: 1rem;
  --row_big: 1.25rem;
  --row_larger: 1.5rem;
  --col_mini: 0.25rem;
  --col_small: 0.5rem;
  --col_base: 1rem;
  --col_big: 1.25rem;
  --col_larger: 1.5rem;
  --padding_mini: 0.5rem;
  --padding_small: 0.75rem;
  --padding_base: 1rem;
  --padding_big: 1.25rem;
  --padding_larger: 1.5rem;
  --padding_huge: 2rem;
  --margin_mini: 0.25rem;
  --margin_small: 0.5rem;
  --margin_base: 1rem;
  --margin_big: 1.25rem;
  --margin_larger: 1.5rem;
  --margin_huge: 2rem;
}

:focus {
  outline: 0 auto 0;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.25);
}

@font-face {
  font-family: "Helvetica Neue";
  font-style: normal;
  font-sizi: 500;
}
* {
  margin: 0;
  padding: 0;
  -webkit-overflow-scrolling: touch;
}

*,
::before,
::after {
  box-sizing: border-box;
}

html {
  font-family: "Helvetica Neue", helvetica, arial, sans-serif;
  line-height: 1.5;
}

body {
  color: var(--color_base);
}

[type=search] {
  -webkit-appearance: none;
  outline-offset: -2px;
}

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

[hidden],
.hidden {
  display: none !important;
}

article {
  overflow: hidden;
}

article > header {
  text-align: center;
}

blockquote {
  margin: 0 0 var(--margin_base);
  padding: 0 var(--padding_base);
  color: var(--color_grey);
  border-left: 3px solid var(--color_border);
}

address {
  font-style: normal;
}

section {
  position: relative;
}

main {
  overflow: hidden;
  position: relative;
}

div {
  /* text-overflow: ellipsis; */
  white-space: normal;
}

address,
article,
aside,
code,
figcaption,
hgroup,
main,
nav,
section,
iframe,
frame,
form,
pre {
  display: block;
}

header::before,
header::after,
footer::before,
footer::after,
frame::before,
frame::after,
iframe::before,
iframe::after,
code::before,
code::after,
address::before,
address::after,
section::before,
section::after {
  clear: both;
  content: "";
  display: block;
}

article::before,
article::after {
  content: "";
  display: block;
  clear: both;
}

form::before,
form::after {
  content: "";
  display: block;
  clear: both;
}

code {
  padding: var(--padding_small);
}

table {
  border: 1px solid var(--color_border);
  border-collapse: collapse;
  border-radius: var(--radius_small);
  width: 100%;
}

nav {
  white-space: nowrap;
}

input,
input::after,
input::before {
  box-sizing: border-box;
}

input[type=color] {
  height: 1.5rem;
  border: 1px solid var(--color_border);
  border-radius: var(--radius_small);
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

input[type=range] {
  margin-top: 0.75rem;
  margin-bottom: 0.875rem;
  outline: none;
  -webkit-appearance: none;
  background: var(--color_border);
  height: 3px;
}

input[type=range]:-webkit-slider-thumb,
input[type=range]:-moz-range-thumb,
input[type=range]:-ms-thumb {
  -webkit-appearance: none;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background: var(--color_info);
  cursor: pointer;
  margin-top: -0.875rem;
}

input[type=text],
input[type=tel],
input[type=email],
input[type=number],
input[type=password],
input[type=url] {
  padding-right: var(--padding_small);
}

input[type=date],
input[type=datetime],
input[type=time],
input[type=datetime-local],
input[type=month],
input[type=week] {
  -webkit-appearance: listbox;
  padding-right: var(--padding_mini);
}

input[type=radio],
input[type=checkbox] {
  box-sizing: border-box;
  padding: 0;
}

input[type=datetime-local] {
  background: #fff;
  letter-spacing: -1px;
}

input:invalid {
  border-color: var(--color_error);
}

button,
select {
  text-transform: none;
  cursor: pointer;
  border: 1px solid var(--color_border);
  padding-left: var(--padding_small);
  padding-right: var(--padding_small);
  border-radius: var(--radius_small);
}

button {
  -webkit-appearance: button;
  display: inline-block;
}

[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:focus {
  outline: none;
}

select {
  padding-left: var(--padding_small);
  min-width: 3rem;
  word-wrap: normal;
  text-align: center;
}

select[multiple] {
  background: none;
}

textarea {
  overflow-x: hidden;
  overflow-y: auto;
  resize: vertical;
  min-height: 10rem;
  padding: var(--padding_small);
  border: 1px solid var(--color_border);
  border-radius: var(--radius_small);
  font: 500 13.3333px;
  min-width: 13.25rem;
}

form textarea {
  width: 100%;
}

.pc .multiple,
.pc select[multiple],
.pc select[size] {
  height: auto;
}

form label ~ label {
  margin-left: var(--margin_base);
}

optgroup {
  line-height: inherit;
}

fieldset {
  border: 0;
  min-width: 0;
}

caption {
  caption-side: bottom;
  padding-bottom: var(--padding_small);
  padding-top: var(--padding_small);
  text-align: left;
}

dt {
  display: block;
  clear: left;
  float: left;
  font-sizi: 500;
  padding: var(--padding_small);
  min-width: 7rem;
  position: relative;
}

dd {
  display: block;
  padding: var(--padding_mini);
  float: left;
}

li {
  position: relative;
}

ul {
  display: block;
  padding-left: 1.25rem;
}

dl,
dd {
  display: block;
}

dl::before,
dl::after,
ul::before,
ul::after,
ol::before,
ol::after {
  content: "";
  display: block;
  float: none;
  clear: both;
}

ol {
  padding-left: 1.25rem;
  padding-right: var(--padding_base);
}

th {
  border: 1px solid var(--color_border);
  padding: var(--padding_small) 0.75rem;
  text-align: inherit;
}

thead th {
  border-bottom: 2px solid var(--color_border);
  vertical-align: bottom;
}

td {
  border: 1px solid var(--color_border);
  padding: var(--padding_small) 0.75rem;
  white-space: nowrap;
}

sub,
sup {
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

svg {
  overflow: hidden;
  vertical-align: middle;
}

output {
  display: inline-block;
}

summary {
  cursor: pointer;
}

template {
  display: none;
}

abbr[title],
abbr[data-original-title] {
  border-bottom: 0;
  cursor: help;
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
  -webkit-text-decoration-skip-ink: none;
          text-decoration-skip-ink: none;
}

h1,
.h1 {
  font-size: var(--font_huge);
}

h2,
.h2 {
  font-size: var(--font_larger);
}

h3,
.h3 {
  font-size: var(--font_big);
}

h4,
.h4 {
  font-size: var(--font_base);
}

h5,
.h5 {
  font-size: var(--font_small);
}

h6,
.h6 {
  font-size: var(--font_mini);
}

h1,
.h1,
h2,
.h2 {
  font-sizi: 750;
}

h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  font-sizi: 550;
}

small,
.font-sm {
  font-size: 75% !important;
}

big,
.font-bg {
  font-size: 125% !important;
}

img {
  border: none;
  vertical-align: middle;
}

figure {
  position: relative;
  overflow: hidden;
  display: block;
  background: center center no-repeat;
  background-size: 100%;
}

figure img {
  width: 100%;
  display: block;
}

figcaption {
  display: block;
}

figure ~ div {
  overflow: hidden;
}

a {
  background-color: transparent;
  color: inherit;
  cursor: pointer;
  text-decoration: none;
}

nav > a {
  display: inline-block;
}

a:hover,
a:not([href]) {
  text-decoration: none;
}

section h1,
section h2,
section h3,
section h4,
section h5 {
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

section p,
section blockquote {
  margin-bottom: 1rem;
}

section blockquote > * {
  margin-bottom: 0;
}

section h1,
section h2,
section h3 {
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--color_border);
}

.warp {
  clear: both;
  float: none;
}

main {
  margin-bottom: 2.5rem;
  transition: all 0.5s ease-in-out;
}

.page > header {
  min-height: var(--height_big);
  display: block;
  position: absolute;
  z-index: 24px;
  right: 0;
  top: 0;
  width: 100%;
  transition: all 0.5s ease-in-out;
}

.page > header ~ main {
  margin-top: 2.5rem;
}

.page > footer {
  min-height: var(--height_small);
  display: block;
  position: absolute;
  z-index: 24px;
  right: 0;
  bottom: 0;
  width: 100%;
  transition: all 0.5s ease-in-out;
}

.side .warp {
  position: absolute;
  z-index: 32;
  top: 0;
  left: 0;
  height: 100%;
  width: 12rem;
  white-space: nowrap;
  transition: all 0.5s ease-in-out;
}

.view {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

main .view {
  overflow-x: auto;
}

.view::-webkit-scrollbar {
  display: none;
}

.table img {
  max-height: 5rem;
}

.table .btn_open {
  width: 1.5rem;
  line-height: 1.5rem;
  height: 1.5rem;
  border: none;
  background: none;
  text-align: center;
  padding: 0;
}

.table .fa-caret-right {
  transform: rotate(0deg);
  transition: transform ease-in-out 0.5s;
}

.table .open .fa-caret-right {
  transform: rotate(90deg);
}

.table .sub {
  background: rgba(0, 0, 0, 0.02);
}

.table .sub .btn_open {
  margin-left: 1.5rem;
}

.table .no_sub .btn_open {
  opacity: 0.5;
}

header.hide-x {
  top: -100%;
}

footer.hide-x {
  bottom: -100%;
}

.mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  opacity: 1;
  display: block;
  background-color: var(--color_mask);
  transition: opacity 0.5s ease;
  z-index: 31;
}

.hide-x .mask {
  width: 0;
  height: 0;
  opacity: 0;
}

.container {
  width: 100%;
  max-width: 77rem;
  margin-right: auto;
  margin-left: auto;
}

.row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
}

.grid {
  max-width: 76rem;
  margin: 0 auto;
  position: relative;
  flex-wrap: wrap;
  display: flex;
  align-content: flex-start;
  align-items: stretch;
  justify-content: start;
  justify-items: stretch;
}

.col {
  max-width: 100%;
}

/**
 */
.card {
  border-radius: var(--radius_small);
  height: calc(100% - var(--margin_small) * 2);
  margin: var(--margin_small);
  overflow: hidden;
}

.card_head::before,
.card_head::after,
.card_body::before,
.card_body::after,
.card_foot::before,
.card_foot::after {
  content: "";
  display: block;
  float: none;
  clear: both;
}

.card_body {
  position: relative;
}

.card_head {
  position: relative;
  padding: var(--padding_mini) var(--padding_base);
}

.card_head ~ .card_body {
  border-top: 1px solid rgba(125, 125, 125, 0.25);
}

.card_foot {
  position: relative;
  padding: var(--padding_mini) var(--padding_base);
}

.list,
.info {
  display: flex;
  flex-flow: row wrap;
  align-items: stretch;
  justify-content: flex-start;
}

.list > *,
.info > * {
  display: block;
  float: left;
  list-style: none;
  position: relative;
  min-width: 8.333333%;
}

ul.list li {
  list-style: none;
  float: left;
  overflow: hidden;
}

ol.list {
  list-style-type: none;
  counter-reset: step;
  counter-increment: step 0;
  padding-left: 2.75rem;
}

ol.list li::before {
  content: counter(step);
  counter-increment: step;
  position: absolute;
  left: -1.75rem;
  top: 50%;
  display: block;
  width: 1.125rem;
  line-height: 1.125rem;
  text-align: center;
  border-radius: 0.125rem;
  transform: translateY(-50%);
  letter-spacing: 0;
  font-size: var(--font_mini);
  height: 1.125rem;
}

.item {
  position: relative;
  width: 100%;
}

.media {
  padding: var(--padding_mini);
}

.doc {
  padding: var(--padding_mini);
  overflow: hidden;
}

.item-ltb .item,
.item-rtb .item,
.item-rr .item,
.item-rl .item,
.item-ll .item,
.item-lr .item {
  padding-left: var(--padding_mini);
  padding-right: var(--padding_mini);
}

.item-tb .media ~ .doc {
  padding-top: 0;
}

.item .title,
.item .content {
  overflow: hidden;
}

.item-ltb .media {
  float: left;
}

.item-rtb .media {
  float: right;
  margin-left: var(--margin_small);
}

.item-ll .media,
.item-lr .media {
  float: left;
}

.item-ll .title,
.item-lr .title {
  float: left;
  margin-right: var(--margin_small);
  min-width: 2rem;
}

.item-lr .content {
  text-align: right;
}

.item-rl .media,
.item-rr .media {
  float: right;
}

.item-rl .title {
  float: left;
  margin-right: var(--margin_small);
}

.item-rr .title {
  float: right;
}

.mobile .item {
  border-bottom: 1px solid var(--color_border);
  margin-bottom: -1px;
}

.group {
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: stretch;
  padding-left: 1px;
  padding-right: 1px;
}

.group > * {
  margin-right: -1px;
  flex: 1;
  float: left;
  border-radius: 0 !important;
  white-space: nowrap;
}

.group > *:focus {
  z-index: 20;
}

.group > *:first-child {
  margin-left: -1px;
}

.group > input ~ .btn,
.group > input ~ [class*=mm_btn_] {
  flex: inherit;
}

.group > span,
.group > .unit,
.group > .title {
  flex: inherit;
  padding-left: var(--padding_base);
  padding-right: var(--padding_base);
  background-color: var(--color_light);
  border: 1px solid var(--color_border);
  font-size: 0.75rem;
  text-align: center;
}

.group-0 > *:first-child {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.group-0 > *:last-child {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.group-1 > *:first-child {
  border-top-left-radius: 0.25rem !important;
  border-bottom-left-radius: 0.25rem !important;
}

.group-1 > *:last-child {
  border-top-right-radius: 0.25rem !important;
  border-bottom-right-radius: 0.25rem !important;
}

.group-2 > *:first-child {
  border-top-left-radius: 0.5rem !important;
  border-bottom-left-radius: 0.5rem !important;
}

.group-2 > *:last-child {
  border-top-right-radius: 0.5rem !important;
  border-bottom-right-radius: 0.5rem !important;
}

.info .item {
  border-top: none;
  border-bottom: none;
  overflow: hidden;
}

.info .title {
  display: flex;
  align-items: center;
}

.info .title::after,
.info .content::after {
  content: "";
  display: block;
  border-bottom: 1px solid var(--color_border);
  position: absolute;
  bottom: 0;
  width: 100%;
}

.info.item-rtb.img-base .media ~ .title::after,
.info.item-rtb.img-base .media ~ .content::after {
  width: calc(100% - var(--img_size_base) - var(--margin_base) * 2 - var(--padding_base));
}

.info.item-rtb.img-big .media ~ .title::after,
.info.item-rtb.img-big .media ~ .content::after {
  width: calc(100% - var(--img_size_big) - var(--margin_base) * 2 - var(--padding_base));
}

.info .content img {
  max-width: 16.25rem;
  max-height: 16.25rem;
}

.item-ll.img-small .title,
.item-lr.img-small .title,
.item-ll.img-small .content,
.item-lr.img-small .content {
  line-height: var(--height_base);
}

.info-base .item {
  display: flex;
}

.info-base .item .title {
  min-width: 5rem;
}

.info-base .item .content {
  color: var(--color_default);
  line-height: var(--height_base);
}

.info-base .item .grid {
  width: 90%;
}

.mobile input[type=range],
.mobile input[type=text],
.mobile input[type=number],
.mobile input[type=password],
.mobile input[type=tel],
.mobile input[type=email],
.mobile input[type=date],
.mobile input[type=datetime],
.mobile input[type=time],
.mobile input[type=datetime-local],
.mobile input[type=month],
.mobile input[type=week],
.mobile input[type=url] {
  width: 100%;
  border: none;
  padding-left: 0;
  padding-right: 0;
}

.mobile textarea {
  border: none;
  padding: var(--padding_mini) 0;
  min-width: auto;
}

.mobile select ~ input[type=text],
.mobile select ~ input[type=number],
.mobile select ~ input[type=tel] {
  border: 1px solid var(--color_border);
  padding-left: var(--padding_small);
  padding-right: var(--padding_small);
  width: initial;
}

.card-full {
  margin: var(--margin_small);
  height: calc(100% - var(--margin_base));
}

.table-sm td,
.table-sm th {
  padding: 0.25rem var(--padding_mini);
}

.modal {
  position: fixed;
  z-index: 30;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transform: translate(-100%, -100%);
}

.modal .mask {
  transition: all 0.2s ease-in-out;
}

.modal.show {
  transform: translate(0, 0);
}

.modal .body {
  background: #fff;
}

.modal .popup {
  position: absolute;
  z-index: 32;
}

.trans {
  transition: all 0.2s linear;
}

.show [class*=from_] {
  position: absolute;
  z-index: 40;
  width: 100%;
}

.show .from_default {
  max-width: 30rem;
  min-height: 7.5rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) !important;
}

.from_left {
  top: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  max-width: 18.75rem;
  transform: translate(-100%, 0);
}

.from_right {
  top: 0;
  bottom: 0;
  right: 0;
  height: 100%;
  max-width: 18.75rem;
  transform: translate(100%, 0);
}

.from_top {
  top: 0;
  left: 0;
  right: 0;
  transform: translate(0, -100%);
}

.from_bottom {
  bottom: 0;
  left: 0;
  right: 0;
  transform: translate(0, 100%);
}

.from_center {
  top: 50%;
  left: 50%;
  width: 25%;
  max-width: 30rem;
  transform: translate(-50%, -50%);
}

.show .from_left,
.show .from_right,
.show .from_top,
.show .from_bottom,
.show .from_center {
  transition: all 0.2s linear;
}

.show .from_left,
.show .from_right,
.show .from_top,
.show .from_bottom {
  transform: translate(0, 0);
}

.show .from_center {
  width: 100%;
}

.value label {
  margin-right: var(--margin_base);
  display: block;
  float: left;
}

.mobile .value label {
  float: none;
}

.form dt {
  line-height: 2rem;
}

.form dd {
  line-height: 1;
}

.icon {
  background: center center no-repeat;
  background-size: 100%;
  width: 100%;
}

.icon img {
  width: 100%;
}

@media (max-width: 576px) {
  .side.hide-x .warp {
    left: -100%;
  }
  .form dt {
    float: none;
    padding-bottom: 0;
  }
  .form dd {
    float: none;
    padding-top: 0;
  }
}
@media (min-width: 576px) {
  .side ~ header,
  .side ~ footer {
    width: calc(100% - 12rem);
  }
  .side ~ main {
    margin-left: 12rem;
  }
  .side ~ header .container,
  .side ~ footer .container,
  .side ~ main .container {
    max-width: initial;
  }
  .side ~ main .row {
    justify-content: left;
  }
  .side.fold ~ header,
  .side.fold ~ footer {
    width: calc(100% - 2.5rem);
  }
  .side.fold ~ main {
    margin-left: 2.5rem;
  }
  .side.fold .warp {
    width: 2.5rem;
  }
  .side.fold .btn:after {
    content: none;
  }
  .side.fold .box {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    width: 12rem;
    background: #fff;
    border: 1px solid rgba(125, 125, 125, 0.25);
    box-shadow: 0 0.25rem 0.5rem 0 rgba(7, 17, 27, 0.1);
  }
  .side.fold .item:hover .box {
    display: block;
    max-height: initial;
  }
  .side.fold .box a:hover {
    background: var(--color_primary);
  }
}
.show {
  display: block !important;
}

.show_phone {
  display: none !important;
}

.show_pad {
  display: none !important;
}

.show_pc {
  display: none !important;
}

.hide {
  display: none !important;
}

.hide_phone {
  display: block !important;
}

.hide_pad {
  display: block !important;
}

.hide_pc {
  display: block !important;
}

@media (max-width: 576px) {
  .show_phone {
    display: block !important;
  }
  .hide_phone {
    display: none !important;
  }
}
@media (min-width: 576px) and (min-width: 992px) {
  .show_pad {
    display: block !important;
  }
  .hide_pad {
    display: none !important;
  }
}
@media (min-width: 1250px) {
  .show_pc {
    display: block !important;
  }
  .hide_pc {
    display: none !important;
  }
}
.card {
  border-radius: var(--radius_small);
  overflow: hidden;
}

.stroke {
  -webkit-background-clip: content-box;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px var(--color_base);
}

.title-right .content {
  text-align: right;
}

.content-right .content {
  text-align: right;
}

.row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
}

.mobile .list-2 > *,
.mobile .list-3 > *,
.mobile .list-4 > *,
.mobile .list-5 > *,
.mobile .list-6 > *,
.mobile .list-8 > *,
.mobile .list-24px > *,
.mobile .list-12 > * {
  border-right: 1px solid var(--color_border);
}

.mobile .list-2 > *:nth-child(2n),
.mobile .list-3 > *:nth-child(3n),
.mobile .list-4 > *:nth-child(4n),
.mobile .list-5 > *:nth-child(5n),
.mobile .list-6 > *:nth-child(6n),
.mobile .list-8 > *:nth-child(8n),
.mobile .list-24px > *:nth-child(10n),
.mobile .list-12 > *:nth-child(12n) {
  border-right: none;
}

@media (min-width: 576px) {
  .container {
    max-width: 33.75rem;
  }
}
@media (min-width: 768px) {
  .container {
    max-width: 45rem;
  }
}
@media (min-width: 992px) {
  .container {
    max-width: 60rem;
  }
}
@media (min-width: 1250px) {
  .container {
    max-width: 71.25rem;
  }
}
@media (min-width: 576px) {
  .container,
  .container-sm {
    max-width: 33.75rem;
  }
}
@media (min-width: 768px) {
  .container,
  .container-md,
  .container-sm {
    max-width: 45rem;
  }
}
@media (min-width: 992px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm {
    max-width: 60rem;
  }
}
@media (min-width: 1250px) {
  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl {
    max-width: 71.25rem;
  }
}
.col,
.col-1,
.col-24px,
.col-11,
.col-12,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-auto,
.col-lg,
.col-lg-1,
.col-lg-24px,
.col-lg-11,
.col-lg-12,
.col-lg-2,
.col-lg-3,
.col-lg-4,
.col-lg-5,
.col-lg-6,
.col-lg-7,
.col-lg-8,
.col-lg-9,
.col-lg-auto,
.col-md,
.col-md-1,
.col-md-24px,
.col-md-11,
.col-md-12,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-auto,
.col-sm,
.col-sm-1,
.col-sm-24px,
.col-sm-11,
.col-sm-12,
.col-sm-2,
.col-sm-3,
.col-sm-4,
.col-sm-5,
.col-sm-6,
.col-sm-7,
.col-sm-8,
.col-sm-9,
.col-sm-auto,
.col-xl,
.col-xl-1,
.col-xl-24px,
.col-xl-11,
.col-xl-12,
.col-xl-2,
.col-xl-3,
.col-xl-4,
.col-xl-5,
.col-xl-6,
.col-xl-7,
.col-xl-8,
.col-xl-9,
.col-xl-auto {
  position: relative;
  padding: 0 !important;
  width: 100%;
}

.w-auto,
.col-auto {
  -ms-flex: auto !important;
  flex-basis: auto !important;
  width: auto !important;
  max-width: 100% !important;
}

.col-1 {
  -ms-flex: 8.333333% !important;
  flex-basis: 8.333333% !important;
  width: 8.333333 !important;
}

.col-2 {
  -ms-flex: 16.666667% !important;
  flex-basis: 16.666667% !important;
  width: 16.666667% !important;
}

.w-25,
.col-3 {
  -ms-flex: 25% !important;
  flex-basis: 25% !important;
  width: 25% !important;
}

.w-33,
.col-4 {
  -ms-flex: 33.333333% !important;
  flex-basis: 33.333333% !important;
  width: 33.333333% !important;
}

.col-5 {
  -ms-flex: 41.666667% !important;
  flex-basis: 41.666667% !important;
  width: 41.666667% !important;
}

.w-50,
.col-6 {
  -ms-flex: 50% !important;
  flex-basis: 50% !important;
  width: 50% !important;
}

.col-7 {
  -ms-flex: 58.333333% !important;
  flex-basis: 58.333333% !important;
  width: 58.333333% !important;
}

.w-66,
.col-8 {
  -ms-flex: 66.666667% !important;
  flex-basis: 66.666667% !important;
  width: 66.666667% !important;
}

.w-75,
.col-9 {
  -ms-flex: 75% !important;
  flex-basis: 75% !important;
  width: 75% !important;
}

.col-24px {
  -ms-flex: 83.333333% !important;
  flex-basis: 83.333333% !important;
  width: 83.333333% !important;
}

.col-11 {
  -ms-flex: 91.666667% !important;
  flex-basis: 91.666667% !important;
  width: 91.666667% !important;
}

.w-100,
.col-12 {
  -ms-flex: 100% !important;
  flex-basis: 100% !important;
  width: 100% !important;
}

.w-20 {
  -ms-flex: 20% !important;
  flex-basis: 20% !important;
  width: 20% !important;
}

.w-30 {
  -ms-flex: 30% !important;
  flex-basis: 30% !important;
  width: 30% !important;
}

.w-40 {
  -ms-flex: 40% !important;
  flex-basis: 40% !important;
  width: 40% !important;
}

.w-60 {
  -ms-flex: 60% !important;
  flex-basis: 60% !important;
  width: 60% !important;
}

.w-80 {
  -ms-flex: 80% !important;
  flex-basis: 80% !important;
  width: 80% !important;
}

@media (max-width: 576px) {
  .col-sm {
    flex-basis: 0;
    flex-grow: 1;
    min-width: 0;
    max-width: 100% !important;
  }
}
@media (min-width: 576px) {
  .col-sm {
    flex-basis: 0;
    flex-grow: 1;
    min-width: 0;
    max-width: 100% !important;
  }
  .w-sm-50,
  .col-sm-6 {
    -ms-flex: 50% !important;
    flex-basis: 50% !important;
    width: 50% !important;
  }
}
@media (min-width: 768px) {
  .col-md {
    flex-basis: 0;
    flex-grow: 1;
    min-width: 0;
    max-width: 100% !important;
  }
  .col-md-1 {
    -ms-flex: 8.333333% !important;
    flex-basis: 8.333333% !important;
    width: 8.333333% !important;
  }
  .col-md-2 {
    -ms-flex: 16.666667% !important;
    flex-basis: 16.666667% !important;
    width: 16.666667% !important;
  }
  .w-md-25,
  .col-md-3 {
    -ms-flex: 25% !important;
    flex-basis: 25% !important;
    width: 25% !important;
  }
  .w-md-33,
  .col-md-4 {
    -ms-flex: 33.333333% !important;
    flex-basis: 33.333333% !important;
    width: 33.333333% !important;
  }
  .col-md-9 {
    -ms-flex: 75% !important;
    flex-basis: 75% !important;
    width: 75% !important;
  }
  .w-md-100,
  .col-md-12 {
    -ms-flex: 100% !important;
    flex-basis: 100% !important;
    width: 100% !important;
  }
}
@media (min-width: 992px) {
  .col-lg {
    flex-basis: 0;
    flex-grow: 1;
    min-width: 0;
    max-width: 100% !important;
  }
  .col-lg-1 {
    -ms-flex: 8.333333% !important;
    flex-basis: 8.333333% !important;
    width: 8.333333% !important;
  }
  .col-lg-2 {
    -ms-flex: 16.666667% !important;
    flex-basis: 16.666667% !important;
    width: 16.666667% !important;
  }
  .col-lg-3 {
    -ms-flex: 25% !important;
    flex-basis: 25% !important;
    width: 25% !important;
  }
  .col-lg-4 {
    -ms-flex: 33.333333% !important;
    flex-basis: 33.333333% !important;
    width: 33.333333% !important;
  }
  .col-lg-9 {
    -ms-flex: 75% !important;
    flex-basis: 75% !important;
    width: 75% !important;
  }
  .col-lg-12 {
    -ms-flex: 100% !important;
    flex-basis: 100% !important;
    width: 100% !important;
  }
}
@media (min-width: 1250px) {
  .col-xl {
    flex-basis: 0;
    flex-grow: 1;
    min-width: 0;
    max-width: 100% !important;
  }
}
.fr {
  float: right !important;
}

.fl {
  float: left !important;
}

.fc {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.fn {
  float: none !important;
  clear: both;
}

.cl {
  clear: left !important;
}

.cr {
  clear: right !important;
}

.cc {
  clear: both !important;
}

.cn {
  clear: none !important;
}

.center {
  text-align: center !important;
}

.left {
  text-align: left !important;
}

.right {
  text-align: right !important;
}

.icon-x figure {
  border: 1px solid rgba(125, 125, 125, 0.25);
  padding: 0.5rem;
  background: #fff !important;
}

.img-base .img {
  width: var(--img_size_base);
  height: var(--img_size_base);
}

.invert {
  filter: invert(100%);
}

.disabled {
  pointer-events: none;
  cursor: not-allowed;
  /* 	-webkit-filter: grayscale(100%);
  filter: grayscale(100%); */
  border: none !important;
  background: rgb(250, 250, 250);
  color: var(--color_default) !important;
}

.required {
  position: relative;
}

.required::before {
  position: absolute;
  content: "*";
  color: var(--color_error);
  left: 0;
  top: 1rem;
}

.active,
.hover,
.focus,
.click {
  position: relative;
}

.btn {
  display: inline-block;
  text-transform: none;
  cursor: pointer;
  border: 1px solid var(--color_border);
  padding-left: var(--padding_small);
  padding-right: var(--padding_small);
  border-radius: var(--radius_small);
  font-size: 0.875rem;
}

.box {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 9;
}

.box::before,
.box::after {
  display: block;
  content: "";
  clear: both;
  float: none;
}

.current .box {
  display: inline-block;
}

.radio input {
  display: none;
}

.radio .figure {
  position: relative;
  top: 3px;
  display: inline-block;
  overflow: hidden;
  width: 1.125rem;
  height: 1.125rem;
  border: 1px solid #38f;
  border-radius: 50%;
  margin-right: 0.5rem;
}

.radio .active .figure::before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  content: " ";
  display: inline-block;
  width: 0.325rem;
  height: 0.325rem;
  background: #38f;
  border-radius: 50%;
}

.code .group {
  border-bottom: none;
}

.number {
  display: inline-block;
}

.number .value {
  display: flex;
}

.number input::-webkit-outer-spin-button,
.number input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

.number input[type=number] {
  border: none;
  text-align: center;
  -moz-appearance: textfield;
  min-width: auto;
}

.btn_del,
.btn_add {
  display: block;
  position: relative;
  line-height: 1;
}

.btn_del::before,
.btn_add::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 0.5rem;
  height: 2px;
  background: #fff;
  line-height: 1;
}

.btn_add::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
  height: 0.5rem;
  background: #fff;
  line-height: 1;
}

.switch .onoff {
  position: relative;
  display: block;
  height: 2rem;
  line-height: 2.2rem !important;
  width: 3.75rem !important;
  background: #fff;
  border: 1px solid var(--color_border);
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.switch .onoff::after {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: calc(2rem - 1px);
  height: calc(2rem - 1px);
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--color_border);
  box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.05);
  content: "";
  transition: all 0.3s ease;
}

.switch .active .onoff {
  background: #04BE02;
}

.switch .active .onoff::after {
  left: 1.79rem;
}

.switch label:active .onoff::after {
  transform: scale(1.15, 0.85);
}

.switch .on,
.switch .off {
  display: block;
  position: absolute;
  top: 49%;
  transform: translateY(-50%);
}

.switch .on {
  left: 0.35rem;
}

.switch .on::before {
  content: "ON";
  font-size: 0.625rem;
  color: #fff;
}

.switch .off {
  right: 0.25rem;
}

.switch .off::before {
  content: "OFF";
  font-size: 0.625rem;
  color: #999;
}

.select a {
  color: inherit;
  display: inline-block;
}

.select .value {
  font-size: 0.875rem;
}

.select select {
  padding: 0 1.5rem 0 0.5rem;
  border-radius: 0.25rem;
  border: 1px solid rgba(125, 125, 125, 0.25);
  height: 2rem;
  background-position-x: calc(100% - 0.25rem);
}

.select .selected {
  padding: 0 0.5rem;
  border-radius: 0.25rem;
  height: 2rem;
  line-height: 2rem;
  border: 1px solid rgba(125, 125, 125, 0.25);
}

.select .box {
  top: 2.05rem;
  bottom: initial;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(125, 125, 125, 0.25);
  border-radius: 0.25rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  left: 0;
  min-width: 5rem;
}

.select ul {
  padding: 0;
  list-style: none;
}

.select li {
  padding: 0 0.5rem;
  line-height: 2rem;
  width: 100%;
}

.select li:hover {
  background: #f9f9f9;
  color: #000000;
}

.textarea .value {
  position: relative;
}

.textarea .btn_expand {
  position: absolute;
  right: 0;
  top: 0;
  border: none;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  opacity: 0;
  font-size: 0.75rem;
  padding: 0.25rem;
  height: auto;
  line-height: 1;
}

.textarea textarea:focus ~ .btn_expand {
  display: inline-block;
  opacity: 1;
}

.textarea .tox-tinymce {
  display: none;
}

.textarea.show-expand .value textarea {
  display: none;
}

.textarea.show-expand .tox-tinymce {
  display: block;
}

.current .selected,
.hover:hover .selected,
.focus:focus .selected {
  border-color: #38f;
}

.reverse {
  display: flex;
}

.reverse .figure {
  height: 2rem;
  width: 1rem;
  position: relative;
  padding-top: 0.125rem;
}

.input .title,
.checkbox .title,
.radio .title,
.select .title,
.number .title,
.slider .title,
.switch .title,
.reverse .title {
  float: left;
  padding-left: 1rem;
  padding-right: 0.5rem;
  min-width: 6.5rem;
}

.checkbox .figure {
  position: relative;
  top: 3px;
  display: inline-block;
  overflow: hidden;
  width: 1.125rem;
  height: 1.125rem;
  border: 1px solid #38f;
  border-radius: 50%;
}

table .reverse .figure {
  float: right;
}

table .reverse .title {
  min-width: initial;
  padding-left: 0;
  float: left;
  white-space: nowrap;
}

.checkbox .active .figure {
  background: #38f;
}

.checkbox .active .figure::before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  content: " ";
  display: inline-block;
  width: 0.5rem;
  height: 0.25rem;
  border-left: 1px solid #fff;
  border-bottom: 1px solid #fff;
}

.input,
.checkbox,
.radio,
.select,
.number,
.slider,
.switch {
  position: relative;
}

.switch .value {
  display: inline-block;
}

.input .value::before,
.checkbox .value:before,
.radio .value:before,
.number .value:before,
.slider .value:before,
.switch .value:before {
  content: "";
  display: block;
}

.input .value:after,
.checkbox .value:after,
.radio .value:after,
.number .value:after,
.slider .value:after,
.switch .value:after {
  content: "";
  display: block;
}

.input .unit {
  padding-left: 0.5rem;
  padding-right: 1rem;
}

.nav a {
  color: inherit;
  text-decoration: none;
}

.data_count {
  padding: 0.5rem 0;
}

.click {
  display: inline-block;
}

.click .box {
  right: initial;
  min-width: 5.25rem;
}

.hover:hover .box {
  display: inline-block;
}

.focus:focus .box {
  display: inline-block;
}

.active:active .box {
  display: inline-block;
}

.inline .input,
.inline .checkbox,
.inline .radio,
.inline .select,
.inline .number,
.inline .slider,
.inline .switch {
  display: inline-block;
}

.pc .select {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.pc .input {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.pc .input input {
  padding: 0.25rem 0.5rem;
  border-radius: 0.25rem;
  border: 1px solid rgba(125, 125, 125, 0.25);
  height: 2rem;
  min-width: 12rem;
}

.pc .checkbox .figure {
  margin-right: 0.5rem;
}

.pc .number .value {
  border: 1px solid #38f;
  border-radius: 0.25rem;
}

.pc .number [class*=mm_btn] {
  border-radius: 0;
  min-width: 2rem;
}

.tab_head > div {
  text-align: center;
  padding: 0 1rem;
  border-right: 1px solid var(--color_border);
  display: inline-block;
}

.tab_head > .active {
  border-bottom: 1px solid var(--bg_grey);
  color: #38f;
  background-color: var(--bg_grey);
}

.pager,
[class*=mm_pager_] {
  text-align: center;
  margin: auto;
}

.pager a,
[class*=mm_pager_] a {
  padding: 0 0.5rem;
  position: relative;
  z-index: 1;
  min-width: 2.25rem;
  white-space: nowrap;
  display: inline-block;
  color: #333;
  border: 1px solid rgba(125, 125, 125, 0.25);
  margin-left: -1px;
  text-align: center;
}

.pager a:first-child {
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}

.pager a:last-child {
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}

.pager a:hover,
.pager a:active {
  z-index: 2;
}

.pager .active,
[class*=mm_pager_] .active {
  background: #38f;
  color: #fff;
  border-color: #38f;
}

.pager.group > a,
[class*=mm_pager_].group > a {
  margin-left: -1px;
}

.table {
  overflow-x: auto;
}

.table th {
  white-space: nowrap;
}

.table td {
  max-width: 24rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

table .btn {
  border-radius: 0.25rem;
  display: inline-block;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  margin-right: 0.5rem;
  font-size: 0.75rem;
}

.input_display {
  width: 3rem;
  text-align: center;
  border-radius: var(--radius_small);
  border: 1px solid var(--color_border);
}

.th_id {
  min-width: 4rem;
}

.th_uin {
  min-width: 12rem;
}

.th_name {
  min-width: 8rem;
}

.th_type {
  min-width: 6rem;
}

.th_address {
  min-width: 15rem;
}

.th_username {
  min-width: 10rem;
}

.th_nickname {
  min-width: 10rem;
}

.th_phone {
  min-width: 9rem;
}

.th_email,
.th_time {
  min-width: 10rem;
}

.th_num {
  min-width: 8rem;
}

.th_score,
.th_state {
  min-width: 5.5rem;
}

.th_handle {
  min-width: 10rem;
}

.th_title {
  width: 15rem;
}

.th_desc {
  width: 20rem;
}

.th_selected {
  width: 3rem;
  text-align: center;
}

.upload_img {
  text-align: center;
  position: relative;
}

.upload_img .btns {
  position: absolute;
  left: calc(100% + 1rem);
  bottom: 0;
}

.upload_img .btn_link {
  font-size: 0.625rem;
  padding: 0 0.5rem;
  white-space: nowrap;
  margin-top: 0.5rem;
}

.upload_img .from_default {
  min-width: 75%;
}

.upload_img .btn_close {
  position: absolute;
  left: 50%;
  bottom: -2rem;
  transform: translateX(-50%);
  border: none;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 50%;
  padding: 0 0.05rem 0.1rem 0;
  width: 2rem;
  height: 2rem;
  color: rgb(105, 105, 105);
}

.upload_img .icon {
  border-radius: 0.25rem;
  border: 1px dashed rgba(125, 125, 125, 0.5);
}

.upload_img .icon img {
  display: none;
}

.upload_add .icon::before,
.upload_add .icon::after {
  content: "";
  display: block;
  transform: translate(-50%, -50%);
  position: absolute;
  top: 50%;
  left: 50%;
  background: rgba(125, 125, 125, 0.5);
}

.upload_add .icon::before {
  width: 1rem;
  height: 0.125rem;
}

.upload_add .icon::after {
  width: 0.125rem;
  height: 1rem;
}

.nav_path {
  margin: 0 0.5rem;
}

.nav_path a ~ a::before {
  content: "\\";
  color: var(--color_border);
  margin-left: 0.125rem;
  margin-right: 0.5rem;
}

.rich-text {
  display: block;
  width: 100vw;
}

.bar_chart {
  height: 300px;
}

.line_chart {
  height: 300px;
}

.pie_chart {
  height: 300px;
}

/**theme.css*/
.tip,
.desc,
.description {
  color: var(--color_describe);
}

.money,
.total,
.price {
  color: var(--color_warning_b);
  font-weight: 600;
}

.price_old {
  color: var(--color_default);
  text-decoration: line-through;
}

.num {
  color: var(--color_info_b);
  font-weight: 600;
}

.time {
  color: var(--color_default);
}

.mm_card,
.card {
  background: #fff;
  border: 1px solid rgba(125, 125, 125, 0.25);
  box-shadow: 0 0.25rem 0.5rem 0 rgba(7, 17, 27, 0.1);
}

.mm_table,
[class*=table-] {
  background: #fff;
}

body {
  background-color: var(--bg_grey);
}

button {
  background-color: var(--color_white);
}

button:active {
  background: var(--color_border);
  border-color: var(--color_border);
}

table a {
  color: var(--color_info);
}

select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  /* 	background: url('') no-repeat center right transparent;
  */
  padding-right: 1.5rem;
  background-position: calc(100% - 3px) center;
}

input::-webkit-input-placeholder {
  color: var(--color_tip);
}

input:-moz-placeholder {
  color: var(--color_tip);
}

input:-ms-input-placeholder {
  color: var(--color_tip);
}

nav a:hover {
  color: var(--color_primary_h);
}

nav a:active {
  color: var(--color_primary_b);
}

.mm_side .mm_warp {
  color: var(--color_white);
  background: var(--bg_black);
}

.mm_page > header .mm_warp {
  background: var(--bg_black);
  color: var(--color_white);
}

.mm_page > footer .mm_warp {
  background: var(--bg_white);
}

[disabled],
.disabled {
  opacity: var(--opacity_disabled);
}

input[disabled],
input.disabled {
  pointer-events: none;
}

button[disabled],
button.disabled {
  cursor: not-allowed;
}

ol.mm_list li::before {
  color: var(--color_white);
  background-color: #afbfd4;
}

ol.mm_list li:nth-child(1)::before {
  background-color: #f12f04;
}

ol.mm_list li:nth-child(2)::before {
  background-color: #ff5000;
}

ol.mm_list li:nth-child(3)::before {
  background-color: #ff9000;
}

.bg {
  background: #b1d5e9 !important;
}

.bg_white {
  background: #fff !important;
  color: var(--color_black);
}

.bg_black {
  background: var(--color_black) !important;
  color: var(--color_white);
  border-color: var(--color_black);
}

.bg_light {
  background: var(--color_light) !important;
  color: var(--color_default);
  border-color: var(--color_light);
}

.bg_dark {
  background: var(--color_dark) !important;
  color: var(--color_white);
  border-color: var(--color_dark);
}

.bg_grey {
  background: var(--color_grey) !important;
  color: var(--color_white);
  border-color: var(--color_grey);
}

.bg_default {
  background: var(--color_default) !important;
  color: var(--color_white);
  border-color: var(--color_default);
}

.bg_red {
  background: var(--color_red) !important;
  color: var(--color_white);
  border-color: var(--color_red);
}

.bg_orange {
  background: var(--color_orange) !important;
  color: var(--color_white);
  border-color: var(--color_orange);
}

.bg_error {
  background: var(--color_error) !important;
  color: var(--color_white);
  border-color: var(--color_error);
}

.bg_yellow {
  background: var(--color_yellow) !important;
  color: var(--color_white);
  border-color: var(--color_yellow);
}

.bg_danger,
.bg_warning {
  background: var(--color_warning) !important;
  color: var(--color_white);
  border-color: var(--color_warning);
}

.bg_green {
  background: var(--color_green) !important;
  color: var(--color_white);
  border-color: var(--color_green);
}

.bg_success {
  background: var(--color_success) !important;
  color: var(--color_white);
  border-color: var(--color_success);
}

.bg_cyan {
  background: var(--color_cyan) !important;
  color: var(--color_white);
  border-color: var(--color_cyan);
}

.bg_info {
  background: var(--color_info) !important;
  color: var(--color_white);
  border-color: var(--color_info);
}

.bg_blue {
  background: var(--color_blue) !important;
  color: var(--color_white);
  border-color: var(--color_blue);
}

.bg_primary {
  background: var(--color_primary) !important;
  color: var(--color_white);
  border-color: var(--color_primary);
}

.bg_purple {
  background: var(--color_purple) !important;
  color: var(--color_white);
  border-color: var(--color_purple);
}

.bg_no {
  background: none !important;
}

.font_black {
  color: var(--color_black) !important;
}

.font_dark,
.font_default {
  color: var(--color_dark) !important;
}

.font_grey {
  color: var(--color_grey) !important;
}

.font_light {
  color: var(--color_light) !important;
}

.font_red,
.font_error {
  color: var(--color_error) !important;
}

.font_green,
.font_success {
  color: var(--color_success) !important;
}

.font_blue,
.font_primary {
  color: var(--color_primary) !important;
}

.font_yellow,
.font_danger,
.font_warning {
  color: var(--color_warning) !important;
}

.font_cyan,
.font_info {
  color: var(--color_info) !important;
}

[class*=font_]:active {
  filter: contrast(2) brightness(0.9);
}

.br_default {
  border-color: var(--color_default) !important;
}

.br_error {
  border-color: var(--color_error) !important;
}

.br_success {
  border-color: var(--color_success) !important;
}

.br_primary {
  border-color: var(--color_primary) !important;
}

.br_danger,
.br_warning {
  border-color: var(--color_warning) !important;
}

.br_info {
  border-color: var(--color_info) !important;
}

.btn_default-x {
  color: var(--color_default);
  border-color: var(--color_default);
}

.btn_error-x {
  color: var(--color_error);
  border-color: var(--color_error);
}

.btn_success-x {
  color: var(--color_success);
  border-color: var(--color_success);
}

.btn_primary-x {
  color: var(--color_primary);
  border-color: var(--color_primary);
}

.btn_danger-x,
.btn_warning-x {
  color: var(--color_warning);
  border-color: var(--color_warning);
}

.btn_info-x {
  color: var(--color_info);
  border-color: var(--color_info);
}

.btn_default-x:active {
  color: var(--color_default_b);
  background-color: rgba(51, 51, 51, 0.1);
}

.btn_error-x:active {
  color: var(--color_error_b);
  background-color: rgba(198, 10, 10, 0.1);
}

.btn_success-x:active {
  color: var(--color_success_b);
  background-color: rgba(47, 152, 51, 0.1);
}

.btn_primary-x:active {
  color: var(--color_primary_b);
  background-color: rgba(51, 136, 255, 0.1);
}

.btn_danger-x:active,
.btn_warning-x:active {
  color: var(--color_warning_b);
  background-color: rgba(255, 80, 0, 0.1);
}

.btn_info-x:active {
  color: var(--color_info_b);
  background-color: rgba(21, 186, 248, 0.1);
}

.btn_default {
  background-color: var(--color_default);
  color: var(--color_white);
  border-color: transparent !important;
}

.btn_error {
  background-color: var(--color_error);
  color: var(--color_white);
  border-color: transparent !important;
}

.btn_success {
  background-color: var(--color_success);
  color: var(--color_white);
  border-color: transparent !important;
}

.btn_primary {
  background-color: var(--color_primary);
  color: var(--color_white);
  border-color: transparent !important;
}

.btn_danger,
.btn_warning {
  background-color: var(--color_warning);
  color: var(--color_white);
  border-color: transparent !important;
}

.btn_info {
  background-color: var(--color_info);
  color: var(--color_white);
  border-color: transparent !important;
}

.btn_link {
  border: none;
  color: inherit;
  background: none;
}

.linear_red,
.linear_warning {
  background-image: linear-gradient(135deg, #FF5A6A 0%, #f12f04 100%);
  color: var(--color_white);
}

.linear_yellow,
.linear_danger {
  background-image: linear-gradient(135deg, rgb(252, 207, 49) 10%, rgb(245, 85, 85) 100%);
  color: var(--color_white);
}

.linear_green,
.linear_success {
  background-image: linear-gradient(135deg, rgb(255, 247, 32) 10%, rgb(60, 213, 0) 100%);
  color: var(--color_white);
}

.linear_blue,
.linear_info {
  background-image: linear-gradient(135deg, rgb(94, 252, 232) 10%, rgb(115, 110, 254) 100%);
  color: var(--color_white);
}

.linear_purple {
  background-image: linear-gradient(135deg, #EE9AE5 10%, #5961F9 100%);
  color: var(--color_white);
}

.linear_red-1 {
  background-image: linear-gradient(135deg, #fffddc 0%, #ff4c4c 20%, #fa2aa4 100%);
  color: var(--color_white);
}

.linear_red-2 {
  background-image: linear-gradient(135deg, #ffe7dc 0%, #ff7a4c 20%, #fa2a7d 100%);
  color: var(--color_white);
}

.linear_yellow-1 {
  background-image: linear-gradient(135deg, #ffe4dc 0%, #faa02a 20%, #ff4c5d 100%);
  color: var(--color_white);
}

.linear_yellow-2 {
  background-image: linear-gradient(135deg, #fffadc 0%, #faf32a 20%, #ff7f4c 100%);
  color: var(--color_white);
}

.linear_green-1 {
  background-image: linear-gradient(135deg, #dcf9ff 0%, #e8ff4c 20%, #2afac2 100%);
  color: var(--color_white);
}

.linear_green-2 {
  background-image: linear-gradient(135deg, #fff7dc 0%, #4cff6e 20%, #46c4fe 100%);
  color: var(--color_white);
}

.linear_blue-1 {
  background-image: linear-gradient(135deg, #dcfff9 0%, #2afadf 20%, #4c83ff 100%);
  color: var(--color_white);
}

.linear_blue-2 {
  background-image: linear-gradient(135deg, #dcffe0 0%, #2accfa 20%, #b14cff 100%);
  color: var(--color_white);
}

.linear_purple-1 {
  background-image: linear-gradient(135deg, #ffe8dc 0%, #ff4cb5 20%, #cc2afa 100%);
  color: var(--color_white);
}

.linear_purple-2 {
  background-image: linear-gradient(135deg, #ffe8dc 0%, #ec4cff 20%, #652afa 100%);
  color: var(--color_white);
}

.btn_default:active {
  background-color: var(--color_default_b);
  color: var(--color_white);
}

.btn_error:active {
  background-color: var(--color_error_b);
  color: var(--color_white);
}

.btn_success:active {
  background-color: var(--color_success_b);
  color: var(--color_white);
}

.btn_primary:active {
  background-color: var(--color_primary_b);
  color: var(--color_white);
}

.btn_danger:active,
.btn_warning:active {
  background-color: var(--color_warning_b);
  color: var(--color_white);
}

.btn_info:active {
  background-color: var(--color_info_b);
  color: var(--color_white);
}

tbody tr:hover {
  background-color: rgba(0, 100, 200, 0.075);
}

tbody tr.active {
  background-color: rgba(0, 100, 200, 0.075) !important;
}

.table_warning tr:hover {
  background-color: #f1b0b7;
}

.table_success tr:hover {
  background-color: #b1dfbb;
}

.table_info tr:hover {
  background-color: #abdde5;
}

.table_dark tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.085);
}

.table-2 tbody tr:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, 0.05);
}

.inverted {
  filter: invert(100%);
}

@keyframes wave_animation {
  0% {
    top: calc((100% - 0.25rem) / 2);
    left: calc((100% - 0.25rem) / 2);
    width: 0.25rem;
    height: 0.25rem;
    opacity: 0.25;
  }
  50% {
    top: calc((100% - 2rem) / 2);
    left: calc((100% - 2rem) / 2);
    width: 2rem;
    height: 2rem;
    opacity: 1;
  }
  100% {
    top: calc((100% - 6rem) / 2);
    left: calc((100% - 6rem) / 2);
    width: 6rem;
    height: 6rem;
    opacity: 0;
  }
}
input.form-control, input, textarea {
  padding: 7px 8px;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  outline: none;
  box-shadow: none !important;
}
input.form-control:hover, input:hover, textarea:hover {
  border: 1px solid #5e6671;
}
input.form-control:focus, input:focus, textarea:focus {
  border: 1px solid #0d6efd;
}

input.el-input__inner {
  padding: 7px 8px;
}

input[type=checkbox],
input[type=radio] {
  box-sizing: content-box !important;
  position: relative;
  width: 14px;
  height: 14px;
  padding: 0;
  border-radius: 2px;
  border: 1px solid #AAAFBB;
  background: #fff;
  -webkit-appearance: none;
  cursor: pointer;
}
input[type=checkbox]:before,
input[type=radio]:before {
  box-sizing: content-box;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 3px;
  margin-top: -1px;
  transform: translate(-50%, -50%) rotate(-45deg);
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform-origin: center;
}
input[type=checkbox]:hover,
input[type=radio]:hover {
  border-color: #AAAFBB;
}
input[type=checkbox]:checked,
input[type=radio]:checked {
  border-color: #ed5141;
  background: #ed5141;
}
input[type=checkbox]:checked:before,
input[type=radio]:checked:before {
  content: "";
}
input[type=checkbox].disabled, input[type=checkbox]:disabled,
input[type=radio].disabled,
input[type=radio]:disabled {
  cursor: default;
  pointer-events: none;
}

input[type=radio] {
  border-radius: 50%;
}

select option {
  margin-bottom: 5px;
}

.btn-outline-info:focus {
  box-shadow: none !important;
}

.page_forum .container .row .card_forum_list .search_box, #app .page_search .card_result_search .search_box, .diy_list .diy_list_container .iudis_box, .page_goods .iudis_box, .page_article .iudis_box {
  justify-content: center !important;
  align-items: center;
  padding: 25px;
  border: 1px solid rgba(54, 96, 243, 0.1);
  border-radius: 16px;
  transition: all 0.3sease;
  background: #fdfbf8;
  z-index: 50;
}

.diy_list .diy_list_container .diy_list_search .view.Search input, .page_exam .warp .exam_list_title .search_box input, .page_forum .container .row .card_forum_list .search_box > input, #app .page_search .card_result_search .search_box input, .page_goods .iudis_box .search_box input, .page_article .iudis_box .search_box input {
  flex: 1;
  min-width: 0;
  height: 48px;
  padding-right: 44px !important;
  font-size: 15px;
  margin-right: 0 !important;
  border-radius: 4px;
  color: #2c3e50;
  background: #fff;
  border: 2px solid #ff7200;
  border-radius: 12px;
  transition: all 0.3sease
}
.diy_list .diy_list_container .diy_list_search .view.Search input:focus, .page_exam .warp .exam_list_title .search_box input:focus, .page_forum .container .row .card_forum_list .search_box > input:focus, #app .page_search .card_result_search .search_box input:focus, .page_goods .iudis_box .search_box input:focus, .page_article .iudis_box .search_box input:focus {
  background: #fff;
  border: 2px solid #ff7200;

}

.diy_list .diy_list_container .diy_list_search .view.Search .btn, .page_exam .warp .exam_list_title .search_box .btn, .page_forum .container .row .card_forum_list .search_box > button, #app .page_search .card_result_search .search_box .btn, .page_goods .iudis_box .search_box .btn, .page_article .iudis_box .search_box .btn {
  flex-shrink: 0;
  position: absolute;
  right: 265px;
  top: 50%;
  transform: translateY(-50%);
  width: 60px !important;
  height: 34px !important;
  padding: 0;
  height: 48px;
  font-size: 20px;
  color: #fff;
  line-height: 18px;
  border: 0 none !important;
  background: linear-gradient(121deg, #fe9760, #e01c2a) !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 17px;
  cursor: pointer;
}
.diy_list .diy_list_container .diy_list_search .view.Search .btn svg, .page_exam .warp .exam_list_title .search_box .btn svg, .page_forum .container .row .card_forum_list .search_box > button svg, #app .page_search .card_result_search .search_box .btn svg, .page_goods .iudis_box .search_box .btn svg, .page_article .iudis_box .search_box .btn svg {
  display: none;
}
.diy_list .diy_list_container .diy_list_search .view.Search .btn:before, .page_exam .warp .exam_list_title .search_box .btn:before, .page_forum .container .row .card_forum_list .search_box > button:before, #app .page_search .card_result_search .search_box .btn:before, .page_goods .iudis_box .search_box .btn:before, .page_article .iudis_box .search_box .btn:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  background-image: url(../img/icon_search_white.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.diy_list .diy_list_container .diy_list_search .view.Search .btn:hover, .page_exam .warp .exam_list_title .search_box .btn:hover, .page_forum .container .row .card_forum_list .search_box > button:hover, #app .page_search .card_result_search .search_box .btn:hover, .page_goods .iudis_box .search_box .btn:hover, .page_article .iudis_box .search_box .btn:hover {
  background-color: #059e41;
}
.diy_list .diy_list_container .diy_list_search .view.Search .btn:focus, .page_exam .warp .exam_list_title .search_box .btn:focus, .page_forum .container .row .card_forum_list .search_box > button:focus, #app .page_search .card_result_search .search_box .btn:focus, .page_goods .iudis_box .search_box .btn:focus, .page_article .iudis_box .search_box .btn:focus {
  box-shadow: none;
}

.page_user .card_addres > div:nth-child(1) > span, .page_user .container-fluid .el-row:nth-child(1) div, .page_goods .card_aside h5, .page_goods .page_goods_list_hot .card_list_hot .hot_title, #app .diy_details .diy_details_box .details_title, .page_article .list_hot .hot_title, .page_article .card_article_hot .hot_title, .page_notice.notice-detail .notice_list .notice_title h5, #app .page_search .card_result_search > .title, #app .page_search .card_result_search .iou .title, .page_message .card_message h4, .article_recommend .title,
.diy_recommend .title,
.notice_list_title .title,
.article_list_title .title,
.good_list_title .title,
.diy_list_title .title {
  position: relative;
  display: inline-block !important;
  vertical-align: top;
  float: none !important;
  padding-left: 0 !important;
  padding: 0 10px !important;
  height: auto !important;
  font-size: 20px !important;
  line-height: 47px;
  font-weight: 700;
  color: #f1a039!important;
  background: none;
}
.page_user .card_addres > div:nth-child(1) > span:before, .page_user .container-fluid .el-row:nth-child(1) div:before, .page_goods .card_aside h5:before, .page_goods .page_goods_list_hot .card_list_hot .hot_title:before, #app .diy_details .diy_details_box .details_title:before, .page_article .list_hot .hot_title:before, .page_article .card_article_hot .hot_title:before, .page_notice.notice-detail .notice_list .notice_title h5:before, #app .page_search .card_result_search > .title:before, #app .page_search .card_result_search .iou .title:before, .page_message .card_message h4:before, .article_recommend .title:before,
.diy_recommend .title:before,
.notice_list_title .title:before,
.article_list_title .title:before,
.good_list_title .title:before,
.diy_list_title .title:before, .page_user .card_addres > div:nth-child(1) > span:after, .page_user .container-fluid .el-row:nth-child(1) div:after, .page_goods .card_aside h5:after, .page_goods .page_goods_list_hot .card_list_hot .hot_title:after, #app .diy_details .diy_details_box .details_title:after, .page_article .list_hot .hot_title:after, .page_article .card_article_hot .hot_title:after, .page_notice.notice-detail .notice_list .notice_title h5:after, #app .page_search .card_result_search > .title:after, #app .page_search .card_result_search .iou .title:after, .page_message .card_message h4:after, .article_recommend .title:after,
.diy_recommend .title:after,
.notice_list_title .title:after,
.article_list_title .title:after,
.good_list_title .title:after,
.diy_list_title .title:after {
  content: "";
  position: absolute;
  top: 50%;
  width: 100%;
  /* border-top: 2px solid #1a2535; */
}
.page_user .card_addres > div:nth-child(1) > span:before, .page_user .container-fluid .el-row:nth-child(1) div:before, .page_goods .card_aside h5:before, .page_goods .page_goods_list_hot .card_list_hot .hot_title:before, #app .diy_details .diy_details_box .details_title:before, .page_article .list_hot .hot_title:before, .page_article .card_article_hot .hot_title:before, .page_notice.notice-detail .notice_list .notice_title h5:before, #app .page_search .card_result_search > .title:before, #app .page_search .card_result_search .iou .title:before, .page_message .card_message h4:before, .article_recommend .title:before,
.diy_recommend .title:before,
.notice_list_title .title:before,
.article_list_title .title:before,
.good_list_title .title:before,
.diy_list_title .title:before {
  right: 100%;
}
.page_user .card_addres > div:nth-child(1) > span:after, .page_user .container-fluid .el-row:nth-child(1) div:after, .page_goods .card_aside h5:after, .page_goods .page_goods_list_hot .card_list_hot .hot_title:after, #app .diy_details .diy_details_box .details_title:after, .page_article .list_hot .hot_title:after, .page_article .card_article_hot .hot_title:after, .page_notice.notice-detail .notice_list .notice_title h5:after, #app .page_search .card_result_search > .title:after, #app .page_search .card_result_search .iou .title:after, .page_message .card_message h4:after, .article_recommend .title:after,
.diy_recommend .title:after,
.notice_list_title .title:after,
.article_list_title .title:after,
.good_list_title .title:after,
.diy_list_title .title:after {
  left: 100%;
}

#app .page_order .card_order .state, #app .page_order .card_goods_list > h4, .page_cart .warp .container .card h4, .page_user .card_password > div:first-child, .page_user .card_info .div_info > span, .page_user .card_address > div:first-child, .page_user .user_right_box .filter_block, #app .diy_details .diy_details_box .rich_text .diy_title, #app .page_search .card_result_search .list_result_search .title_type {
  position: relative;
  display: block;
  padding: 20px;
  margin-bottom: 0;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  background-color: #ff7200;
  border-radius: 4px 4px 0 0;
}

.article_recommend,
.diy_recommend,
.notice_list_title,
.article_list_title,
.good_list_title,
.diy_list_title {
  margin: 30px 0 0 0 !important;
  height: auto !important;
  /* padding: 80px 0 50px; */
  font-size: 0;
  text-align: center;
  background: transparent !important;
}
.article_recommend .title span,
.diy_recommend .title span,
.notice_list_title .title span,
.article_list_title .title span,
.good_list_title .title span,
.diy_list_title .title span {
  position: relative;
  display: block;
  z-index: 999;
  color: #666;
  font-size: 20px;
}
/* .article_recommend .title span::after{
	content: "SHOP";
	color: #ed51411c;
	font-size: 150px;
	display: block;
	z-index: 0;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: -80px;
}
.diy_recommend .title span::after{
	content: "RECOMMEND";
	color: #ed51411c;
	font-size: 150px;
	display: block;
	z-index: 0;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: -80px;
} */
.article_recommend .more_box,
.diy_recommend .more_box,
.notice_list_title .more_box,
.article_list_title .more_box,
.good_list_title .more_box,
.diy_list_title .more_box {
  display: block !important;
  float: none !important;
  width: 80px !important;
  height: auto !important;
  margin: 0 auto;
  padding-right: 0 !important;
  position: relative;
  z-index: 999;
}
.article_recommend .more_box .more,
.diy_recommend .more_box .more,
.notice_list_title .more_box .more,
.article_list_title .more_box .more,
.good_list_title .more_box .more,
.diy_list_title .more_box .more {
  position: relative;
  width: auto !important;
  height: 34px !important;
  padding: 0;
  font-size: 14px !important;
  font-weight: normal;
  color: #1a2535 !important;
  border: 0 none !important;
  background: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  border-bottom: 1px solid #1a2535 !important;
  transition: none;
}
.article_recommend .more_box .more:before,
.diy_recommend .more_box .more:before,
.notice_list_title .more_box .more:before,
.article_list_title .more_box .more:before,
.good_list_title .more_box .more:before,
.diy_list_title .more_box .more:before {
  content: "";
  position: absolute;
  bottom: 1px;
  left: 0;
  right: 0;
  /* border-bottom: 1px solid #1a2535; */
}
.article_recommend .more_box .more:after,
.diy_recommend .more_box .more:after,
.notice_list_title .more_box .more:after,
.article_list_title .more_box .more:after,
.good_list_title .more_box .more:after,
.diy_list_title .more_box .more:after {
  content: " / More";
}
.article_recommend .more_box .more:hover,
.diy_recommend .more_box .more:hover,
.notice_list_title .more_box .more:hover,
.article_list_title .more_box .more:hover,
.good_list_title .more_box .more:hover,
.diy_list_title .more_box .more:hover {
  box-shadow: none !important;
}
.article_recommend .more_box .more:hover::after,
.diy_recommend .more_box .more:hover::after,
.notice_list_title .more_box .more:hover::after,
.article_list_title .more_box .more:hover::after,
.good_list_title .more_box .more:hover::after,
.diy_list_title .more_box .more:hover::after {
  color: #ed5141 !important;
}
.article_recommend .more_box .more:hover span, .article_recommend .more_box .more:hover .mor,
.diy_recommend .more_box .more:hover span,
.diy_recommend .more_box .more:hover .mor,
.notice_list_title .more_box .more:hover span,
.notice_list_title .more_box .more:hover .mor,
.article_list_title .more_box .more:hover span,
.article_list_title .more_box .more:hover .mor,
.good_list_title .more_box .more:hover span,
.good_list_title .more_box .more:hover .mor,
.diy_list_title .more_box .more:hover span,
.diy_list_title .more_box .more:hover .mor {
  color: #ed5141 !important;
}
.article_recommend .more_box .more span, .article_recommend .more_box .more .mor,
.diy_recommend .more_box .more span,
.diy_recommend .more_box .more .mor,
.notice_list_title .more_box .more span,
.notice_list_title .more_box .more .mor,
.article_list_title .more_box .more span,
.article_list_title .more_box .more .mor,
.good_list_title .more_box .more span,
.good_list_title .more_box .more .mor,
.diy_list_title .more_box .more span,
.diy_list_title .more_box .more .mor {
  color: #1a2535 !important;
  background: none !important;
  box-shadow: none !important;
}
.page_root .article_s .article_recommend{
	/* margin-top: -20px !important; */
}
/* .page_root .article_s .article_recommend .title span::after{
	content: "NEWS";
} */






/* 评论模块公共开始 */
/* 评论模块 */
.comment_box {
  border-bottom: 1px solid #e4eaef;
  padding: 20px 0;
  position: relative;
}
.comment_box:before {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 50%;
  width: 80px;
  height: 3px;
  background: #ff9500;
  transform: translateX(-50%);
}
.comment_box .list_comment {
  padding: 15px;
}
.comment_box .list_comment .item_comment_box {
  position: relative;
  margin-bottom: 25px;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.comment_box .list_comment .item_comment_box:hover {
  transform: translateY(-3px);
}
.comment_box .list_comment .item_comment_box .comment {
  padding: 10px 0;
}
.comment_box .list_comment .item_comment_box .left_block {
  padding-right: 10px !important;
  margin-right: 10px;
  position: relative;
}
.comment_box .list_comment .item_comment_box .left_block:after {
  content: "";
  position: absolute;
  right: 0;
  top: 15%;
  height: 70%;
  width: 1px;
  background: linear-gradient(transparent, #ff9500, transparent);
}
.comment_box .list_comment .item_comment_box .left_block img {
  border-radius: 50%;
  width: 70px !important;
  height: 70px !important;
  border: 2px solid #ff950033;
  transition: all 0.3s ease;
}
.comment_box .list_comment .item_comment_box .left_block img:hover {
  border-color: #ff9500;
  transform: rotate(15deg);
}
.comment_box .list_comment .item_comment_box .right_block {
  padding: 25px;
  font-size: 14px;
  border: 1px solid #e4eaef;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(255,149,0,0.08);
  position: relative;
  overflow: hidden;
}
.comment_box .list_comment .item_comment_box .right_block:before {
  content: "";
  position: absolute;
  left: -1px;
  top: 0;
  height: 100%;
  width: 4px;
  background: #ff9500;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.comment_box .list_comment .item_comment_box:hover .right_block:before {
  opacity: 1;
}
.comment_box .list_comment .item_comment_box .right_block .top_comment {
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 18px;
  position: relative;
}
.comment_box .list_comment .item_comment_box .right_block .top_comment .nickname {
  margin-right: 20px;
  font-size: 18px;
  font-weight: 800;
  color: #1a2535;
  letter-spacing: 0.5px;
  position: relative;
}
.comment_box .list_comment .item_comment_box .right_block .top_comment .nickname:after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 40%;
  height: 2px;
  background: #ff9500;
}
.comment_box .list_comment .item_comment_box .right_block .top_comment .time_block .time {
  text-align: left;
  font-size: 14px;
  transform: none;
  color: #8a929b;
  display: flex;
  align-items: center;
}
.comment_box .list_comment .item_comment_box .right_block .top_comment .time_block .time:before {
  content: "🕒";
  margin-right: 5px;
  font-size: 12px;
}
.comment_box .list_comment .item_comment_box .right_block .content {
  float: none;
  margin-bottom: 25px;
  font-size: 16px;
  line-height: 26px;
  word-break: break-all;
  color: #5e6671;
  position: relative;
  padding-left: 20px;
}
.comment_box .list_comment .item_comment_box .right_block .content:before {
  content: "“";
  position: absolute;
  left: 0;
  top: -5px;
  font-size: 24px;
  color: #ff9500;
  font-family: Georgia, serif;
}
.comment_box .list_comment .item_comment_box .right_block .comment_reply {
  float: none;
  display: flex;
  gap: 10px;
}
.comment_box .list_comment .item_comment_box .right_block .comment_reply .btn {
  width: auto;
  height: 30px !important;
  padding: 0 15px;
  line-height: 28px !important;
  text-align: center;
  color: #fff;
  font-size: 0;
  font-weight: bold;
  border-radius: 4px;
  border: none;
  background: #ff9500;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}
.comment_box .list_comment .item_comment_box .right_block .comment_reply .btn::after {
  content: "Reply";
  font-size: 14px;
  position: relative;
  z-index: 1;
}
.comment_box .list_comment .item_comment_box .right_block .comment_reply .btn:nth-child(2)::after {
  content: "Delete";
  color: #fff;
}
.comment_box .list_comment .item_comment_box .right_block .comment_reply .btn:before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.2);
  transform: skewX(-30deg);
  transition: left 0.6s ease;
}
.comment_box .list_comment .item_comment_box .right_block .comment_reply .btn:hover {
  background: #e68900;
  box-shadow: 0 3px 12px rgba(255,149,0,0.3);
}
.comment_box .list_comment .item_comment_box .right_block .comment_reply .btn:hover:before {
  left: 120%;
}
.comment_box .list_comment .item_comment_box .list_reply {
  margin-left: 94px !important;
  padding-right: 25px;
}
/* 评论模块公共结束 */



/* 富文本编辑器开始 */
.form_editor {
  padding: 0;
  width: 100%;
  /* background: #fff; */
  border-radius: 12px;
  /* box-shadow: 0 4px 16px rgba(255,149,0,0.08); */
  padding: 30px;
  margin-top: 40px;
  position: relative;
}
/* .form_editor:before {
  content: "";
  position: absolute;
  top: -20px;
  left: 50%;
  width: 90%;
  height: 20px;
  background: linear-gradient(45deg, #ff9500, transparent);
  clip-path: polygon(0 0, 100% 0, 95% 100%, 5% 100%);
  opacity: 0.1;
} */

.ql-container{
  height: 85% !important;
}

.form_editor .fn {
  margin-top: 30px;
}
.form_editor .editor {
  margin-top: 25px;
}
.form_editor .editor:before {
  content: "发表评论";
  color: #ff9500;
  position: relative;
  left: 0px;
  top: -15px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: 1px;
}
.form_editor .quill-editor {
  height: 500px;
  border: 2px solid #ff950033;
  border-radius: 8px;
  padding: 15px;
  transition: border-color 0.3s ease;
}
.form_editor .quill-editor:hover {
  border-color: #ff950066;
}
.form_editor .quill-editor:focus {
  border-color: #ff9500;
  box-shadow: 0 0 0 3px rgba(255,149,0,0.1);
}
.form_editor .fl, .form_editor .fr {
  position: relative;
  /* top: 22px; */
}
.form_editor .fl {
  color: #555;
}
.form_editor .fl:after {
  content: ":";
}
.form_editor .fl i {
  color: #ff9500;
  font-style: normal;
  font-weight: bold;
}
.form_editor .fr .btn {
  border-color: #f1a039!important;
  color: #f1a039!important;
  border-radius: 4px;
  padding: 8px 20px;
  transition: all 0.3s ease !important;
}
.form_editor .fr .btn:hover {
  background: #f1a039!important;
  color: #fff !important;
  box-shadow: 0 3px 12px rgba(255,149,0,0.3);
}

.submit_button,
.form_editor .btn_publish {
  margin-top: 92px !important;
  width: 180px;
  margin: 10px auto;
  position: relative;
}

.submit_button,
.form_editor .btn_publish .btn {
  height: 50px;
  font-weight: 800;
  color: #fff !important;
  border-radius: 8px !important;
  background: #f1a039!important;
  border: none !important;
  letter-spacing: 1px;
  transition: all 0.3s ease !important;
  position: relative;
  overflow: hidden;
}
.submit_button:before,
.form_editor .btn_publish .btn:before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.3),
    transparent
  );
  transition: left 0.6s ease;
}
.submit_button:hover,
.form_editor .btn_publish .btn:hover {
  background: #e68900 !important;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(255,149,0,0.3);
}
.submit_button:hover:before,
.form_editor .btn_publish .btn:hover:before {
  left: 120%;
}

.submit_button{
  margin-top: 20px !important;
  padding: 0 0 0 0 !important;
}

.diy_field{
  margin-left:  0px !important;
}
/* 富文本编辑器开始 */




/* 分页器开始*/
#app .pagination {
  justify-content: center;
  margin-bottom: 90px;
  position: relative;
}
/* #app .pagination:before {
  content: "···";
  position: absolute;
  left: 50%;
  bottom: -25px;
  transform: translateX(-50%);
  color: #ff9500;
  letter-spacing: 3px;
} */
#app .pagination .page-item {
  border-radius: 50%;
  margin: 0 5px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
#app .pagination .page-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 3px 8px rgba(255,149,0,0.2);
}
#app .pagination .page-item .page-link {
  padding: 9px 10px;
  min-width: 40px;
  text-align: center;
  font-size: 16px;
  border-radius: 50% !important;
  border: 1px solid #ff950033;
  color: #5e6671;
  transition: all 0.3s ease;
}
#app .pagination .page-item .page-link:hover {
  color: #ff9500;
  border-color: #ff9500;
}
#app .pagination .page-item.disabled {
  opacity: 0.5;
}
#app .pagination .page-item.active .page-link {
  font-weight: 800;
  color: #fff !important;
  background: linear-gradient(135deg, #ff9500, #ffac33) !important;
  box-shadow: 0 3px 8px rgba(255,149,0,0.3);
}
/* 分页器结束*/


/* 商城资讯页面开始 */
/* 资讯列表布局 */
#app .page_article .warp > .container{
  max-width: 1700px !important;
}

.page_article .list_article {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px !important;
  margin: 0 auto !important;
  padding: 2px !important;
}

/* 资讯卡片 */
.page_article .list_article .article_warp {
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
  padding: 20px !important;
  border: 1px solid #e4eaef !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
  transition: all 0.3s ease !important;
  /* background: #fff !important; */
  position: relative !important;
  overflow: hidden !important;
  background: rgba(255, 149, 0, 0.1) !important;
}


.page_article .list_article .article_warp .article{
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* 卡片悬浮效果 */
.page_article .list_article .article_warp:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15) !important;
  border-color: #f1a039!important;
}

/* 媒体图像 */
.page_article .list_article .article_warp .media .icon {
  width: 100% !important;
  height: 200px !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  margin-bottom: 15px !important;
  position: relative !important;
}

.page_article .list_article .article_warp .media .icon img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.3s ease !important;
  border-radius: 12px !important;
}

.page_article .list_article .article_warp:hover .media .icon img {
  transform: scale(1.1) !important;
  width: 100%;
  height: 100%;
}

/* 文档内容 */
.page_article .list_article .article_warp .doc {
  display: flex !important;
  flex-direction: column;
  justify-content: space-between !important;
  /* height: calc(100%) !important; */
  align-items: center;
}

/* 标题 */
.page_article .list_article .article_warp .doc .title {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #1a2535 !important;
  margin-bottom: 12px !important;
  line-height: 1.4 !important;
  transition: color 0.3s ease !important;
}

.page_article .list_article .article_warp:hover .doc .title {
  color: #f1a039!important;
}

/* 描述 */
.page_article .list_article .article_warp .doc .desc{
  font-size: 14px !important;
  color: #64748b !important;
  margin-bottom: 15px !important;
  line-height: 1.6 !important;
  transition: color 0.3s ease !important;
}

.page_article .list_article .article_warp:hover .doc .desc {
  color: #1a2535 !important;
}

/* 时间和互动 */
.page_article .list_article .article_warp .doc .time
.page_article .list_article .article_warp .doc .praise
.page_article .list_article .article_warp .doc .see {
  display: flex !important;
  align-items: center !important;
  font-size: 13px !important;
  color: #f1a039!important;
  margin-right: 15px !important;
  transition: color 0.3s ease !important;
}

.page_article .list_article .article_warp .doc .praise:before
.page_article .list_article .article_warp .doc .see:before {
  content: "" !important;
  display: inline-block !important;
  width: 18px !important;
  height: 18px !important;
  margin-right: 6px !important;
  background-size: contain !important;
  transition: opacity 0.3s ease !important;
}

.page_article .list_article .article_warp .doc .praise:before{
  background: url(../img/icon_thumbup.svg) no-repeat center !important;
}

.page_article .list_article .article_warp .doc .see:before {
  background: url(../img/icon_eye_red.svg) no-repeat center !important;
}

/* 装饰性伪类 */
.page_article .list_article .article_warp::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 5px !important;
  background: linear-gradient(90deg, #ff9500, #ff7200) !important;
  border-radius: 16px 16px 0 0 !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
}

.page_article .list_article .article_warp:hover::before {
  opacity: 1 !important;
}

/* 卡片底部装饰 */
.page_article .list_article .article_warp::after{
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 4px !important;
  background: linear-gradient(90deg, #ff9500, #ff7200) !important;
  transform: scaleX(0) !important;
  transform-origin: left !important;
  transition: transform 0.3s ease !important;
}

.page_article .list_article .article_warp:hover::after{
  transform: scaleX(1) !important;
}
/* 商城资讯页面结束 */



/* 首页新闻处理 */
.page_root .list_article{
	display: block;
	overflow: hidden;
}
.page_root .list_article .article{
	flex-direction: row;
}
.page_root .list_article .list_article_box{
}
.page_root .list_article .article_warp{
	position: relative;
	padding-bottom: 0;
	z-index: 999;
	width: 39%;
	height: 96px;
	margin-bottom: 5px;
	float: right;
	overflow: hidden;
	border-radius: 5px;
  background: #f1a039!important;
  border: 1px solid #e4eaef;;
}
.page_root .list_article .article_warp:not(:first-child){
	padding: 5px;
	display: inline-block;
}
.page_root .list_article .article_warp:last-child{
	margin-bottom: 0;
}
.page_root .list_article .article_warp:first-child{
  width: 58%;
  /* float: left; */
  height: 527px;
}
.page_root .list_article .article_warp:first-child .media .icon{
	height: 500px;
}
.page_root .list_article .article_warp .media{
	position: relative;
	padding: 0 !important;
}
.page_root .list_article .article_warp:first-child .media{
	width: 100%;
}
.page_root .list_article .article_warp:not(:first-child) .media{
	display: block;
}
.page_root .list_article .article_warp:not(:first-child) .media .icon img{
	border-radius: 3px;
  width: 100%;
  height: 100%;
}
.page_root .list_article .article_warp:not(:first-child) .media .icon{
	width: 120px;
	height: 84px;
	float: left;
}
.page_root .list_article .article_warp:first-child .doc{
	position: absolute;
	height: 480px;
	padding: 0;
}
.page_root .list_article .article_warp:first-child .doc .title{
	color: #000;
	top: 15px;
  font-weight: 600;
  padding: 10px;
}
.page_root .list_article .article_warp:first-child .doc .desc{
	position: absolute;
	/* bottom: 30px;
	left: 30px; */
  color: #000 !important;
  padding: 10px;
}
.page_root .list_article .article_warp:not(:first-child) .doc{
	position: relative;
	display: inline-block;
	padding: 0;
	width: calc(100% - 125px);
	float: left;
	height: 80px;
}
.page_root .list_article .article_warp:not(:first-child) .doc .title{
	top: -10px;
	left: 0;
	margin: 0;
  color: #fff;
  font-weight: 600;
  
}
.page_root .list_article .article_warp:hover{
	background: #fff1f1;
}
.page_root .list_article .article_warp:hover .media::after {
  opacity: 0.65;
  visibility: visible;
}
.page_root .list_article .article_warp:hover .time,.page_root .list_article .article_warp:hover .desc {
  opacity: 1;
  visibility: visible;
}
.page_root .list_article .article_warp .doc .desc{
	 opacity: 1;
	 visibility: visible;
}
.page_root .list_article .article_warp:not(:first-child) .doc .desc{
	color: #fff;
	position: absolute;
	left: 0;
	bottom: 5px;
}
.page_root .list_article .article_warp .doc .time{
	display: none;
}
.page_root .list_article .article_warp .media:after{
	background-color: transparent;
}

#app .page_order .card_goods_list .filter_block .bar_sort .dropdown .btn, .diy_list .diy_list_container .diy_list_select_box .diy_list_dropdown_box .view .btn, .page_goods .iudis_box .filter_block .bar_sort .btn, .page_article .iudis_box .filter_block .bar_sort .btn, .page_goods .iudis_box .filter_block .bar_filter .btn, .page_article .iudis_box .filter_block .bar_filter .btn {
  width: 150px;
  height: 48px;
  margin: 0;
  color: #ff7200 !important;
  border: 2px solid #ff7200;
  background-color: rgba(255, 149, 0, 0.2) !important;
  box-shadow: none;
}
#app .page_order .card_goods_list .filter_block .bar_sort .dropdown .btn:hover, .diy_list .diy_list_container .diy_list_select_box .diy_list_dropdown_box .view .btn:hover, .page_goods .iudis_box .filter_block .bar_sort .btn:hover, .page_article .iudis_box .filter_block .bar_sort .btn:hover, .page_goods .iudis_box .filter_block .bar_filter .btn:hover, .page_article .iudis_box .filter_block .bar_filter .btn:hover {
  border: 2px solid #ff7200 !important;
  background: transparent !important;
}

#app .page_order .card_goods_list .filter_block .bar_sort .dropdown, .diy_list .diy_list_container .diy_list_select_box .diy_list_dropdown_box .view .dropdown, .page_goods .iudis_box .filter_block .bar_sort .dropdown, .page_article .iudis_box .filter_block .bar_sort .dropdown, .page_goods .iudis_box .filter_block .bar_filter .dropdown, .page_article .iudis_box .filter_block .bar_filter .dropdown {
  box-shadow: none;
  outline: none;
}
#app .page_order .card_goods_list .filter_block .bar_sort .dropdown .dropdown-menu .dropdown-item:hover, .diy_list .diy_list_container .diy_list_select_box .diy_list_dropdown_box .view .dropdown .dropdown-menu .dropdown-item:hover, .page_goods .iudis_box .filter_block .bar_sort .dropdown .dropdown-menu .dropdown-item:hover, .page_article .iudis_box .filter_block .bar_sort .dropdown .dropdown-menu .dropdown-item:hover, .page_goods .iudis_box .filter_block .bar_filter .dropdown .dropdown-menu .dropdown-item:hover, .page_article .iudis_box .filter_block .bar_filter .dropdown .dropdown-menu .dropdown-item:hover {
  background: #ff7200 !important;
  color: #fff !important;
}

.diy_list .diy_list_container .iudis_box, .page_goods .iudis_box, .page_article .iudis_box {
  position: relative;
  display: flex;
  align-items: center;
  /* padding: 10px 0; */
  margin-bottom: 10px;
}

/* 搜索框和筛选栏 */
.page_goods .iudis_box .search_box,
.page_article .iudis_box .search_box {
  flex: 1;
  min-width: 0;
  position: relative;
}

.page_goods .iudis_box .search_box .btn,
.page_article .iudis_box .search_box .btn {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  width: 35px !important;
  height: 34px !important;
  background: #f1a039!important;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.page_goods .iudis_box .search_box .btn:hover,
.page_article .iudis_box .search_box .btn:hover {
  background: #e68900;
  transform: translateY(-50%) scale(1.1);
}

.page_goods .iudis_box .filter_block,
.page_article .iudis_box .filter_block {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0 !important;
}

/* .page_goods .iudis_box .filter_block .bar_sort,
.page_article .iudis_box .filter_block .bar_sort,
.page_goods .iudis_box .filter_block .bar_filter,
.page_article .iudis_box .filter_block .bar_filter {
  padding: 8px 16px;
  border-radius: 20px;
  background: rgba(255,149,0,0.1);
  color: #5e6671;
  cursor: pointer;
  transition: all 0.3s ease;
}

.page_goods .iudis_box .filter_block .bar_sort:hover,
.page_article .iudis_box .filter_block .bar_sort:hover,
.page_goods .iudis_box .filter_block .bar_filter:hover,
.page_article .iudis_box .filter_block .bar_filter:hover {
  background: #ff9500;
  color: #fff;
  transform: translateY(-2px);
} */

/* 商品卡片 */
.page_goods .card_aside .list .goods .goods_nav,
.page_goods .page_goods_list_hot .list .goods .goods_nav,
.page_goods .page_goods_list_wrap .page_goods_list_base .card_goods_list .list_goods .goods,
.page_root .product .list_goods .lis_cont {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.page_goods .card_aside .list .goods .goods_nav:hover,
.page_goods .page_goods_list_hot .list .goods .goods_nav:hover,
.page_goods .page_goods_list_wrap .page_goods_list_base .card_goods_list .list_goods .goods:hover,
.page_root .product .list_goods .lis_cont:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(255,149,0,0.2);
}

.page_goods .card_aside .list .goods .goods_nav .media img,
.page_goods .page_goods_list_hot .list .goods .goods_nav .media img,
.page_goods .page_goods_list_wrap .page_goods_list_base .card_goods_list .list_goods .goods .media .icon img,
.page_root .product .list_goods .lis_cont img {
  transition: transform 0.6s ease;
  height: 220px !important;
}

.page_goods .card_aside .list .goods .goods_nav:hover img,
.page_goods .page_goods_list_hot .list .goods .goods_nav:hover img,
.page_goods .page_goods_list_wrap .page_goods_list_base .card_goods_list .list_goods .goods:hover img,
.page_root .product .list_goods .lis_cont:hover img {
  transform: scale(1.1);
}

.page_goods .card_aside .list .goods .goods_nav .good_bottom .title,
.page_goods .page_goods_list_hot .list .goods .goods_nav .good_bottom .title,
.page_goods .page_goods_list_wrap .page_goods_list_base .card_goods_list .list_goods .goods .doc a .title,
.page_root .product .list_goods .lis_cont .title {
  font-size: 16px;
  color: #1a2535;
  padding: 16px;
  text-align: center;
  transition: color 0.3s ease;
}

.page_goods .card_aside .list .goods .goods_nav:hover .title,
.page_goods .page_goods_list_hot .list .goods .goods_nav:hover .title,
.page_goods .page_goods_list_wrap .page_goods_list_base .card_goods_list .list_goods .goods:hover .title,
.page_root .product .list_goods .lis_cont:hover .title {
  color: #ff9500;
}

.page_goods .card_aside .list .goods .goods_nav .good_bottom .price_block,
.page_goods .page_goods_list_hot .list .goods .goods_nav .good_bottom .price_block,
.page_goods .page_goods_list_wrap .page_goods_list_base .card_goods_list .list_goods .goods .doc .bottom,
.page_root .product .list_goods .lis_cont .doc {
  padding: 16px;
  display: flex;
  justify-content: center;
  gap: 8px;
  align-items: center;
}

.page_goods .card_aside .list .goods .goods_nav .good_bottom .price_block .price,
.page_goods .page_goods_list_hot .list .goods .goods_nav .good_bottom .price_block .price,
.page_goods .page_goods_list_wrap .page_goods_list_base .card_goods_list .list_goods .goods .doc .bottom .price,
.page_root .product .list_goods .lis_cont .doc .price {
  padding: 6px 16px;
  background: #ff9500;
  color: #fff;
  border-radius: 20px;
  font-size: 14px;
  font-weight: bold;
  transition: all 0.3s ease;
}

.page_goods .card_aside .list .goods .goods_nav:hover .price_block .price,
.page_goods .page_goods_list_hot .list .goods .goods_nav:hover .price_block .price,
.page_goods .page_goods_list_wrap .page_goods_list_base .card_goods_list .list_goods .goods:hover .price_block .price,
.page_root .product .list_goods .lis_cont:hover .price_block .price {
  background: #e68900;
  transform: scale(1.05);
}

/* 操作按钮 */
#app .page_order .card_goods_list .list_order .item_order .sum_price .btn,
.page_cart .warp .container .card .cart_block .list_cart .item_cart .cart_body .right_info .btn_del {
  width: 40px;
  height: 40px;
  background: #f1a039!important;
  border-radius: 50% !important;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

#app .page_order .card_goods_list .list_order .item_order .sum_price .btn:hover,
.page_cart .warp .container .card .cart_block .list_cart .item_cart .cart_body .right_info .btn_del:hover {
  background: #e68900 !important;
  transform: scale(1.1);
}

#app .page_order .card_goods_list .list_order .item_order .sum_price .btn:before,
.page_cart .warp .container .card .cart_block .list_cart .item_cart .cart_body .right_info .btn_del:before {
  content: "";
  width: 20px;
  height: 20px;
  background: url(../img/icon_close.svg) no-repeat center/contain;
  filter: brightness(0) invert(1);
}

.page_cart .warp .container .card .cart_block .list_cart .item_cart .cart_body .right_info .btn_del:before{
  display: none !important;
}
/* 基础样式开始 */
/* 
    顶部背景色： #feb6d4
    主题色：#041126
 /*--------------------------------------------------全局样式---------------------------------------------------------------------*/
/* ******************************************公共样式开始*********************************************************** */
#app > .page_cart,
#app > .page_pay,
#app > .page_exam,
#app > .page_notice,
#app > .page_article,
#app > .diy_list,
#app > .diy_edit,
#app > .page_feedback,
#app > .page_user,
#app > .page_order,
#app > .page_forum,
#app .page_message,
#app .page_goods,
.page_account,
#app > .diy_details {
  min-height: calc(100vh - 212px);
  background-color: rgba(255, 149, 0, 0.1);;
  /* background-image: url("../img/dragon.png"); */
  background-attachment: fixed;
  background-position: top right;
  background-repeat: no-repeat;
  /* background-size: 300px; */
  max-width: 100% !important;
}

#app > .page_cart .warp {
  margin: 10px auto;
}

/* ******************************************公共样式结束*********************************************************** */
/* 最大宽度及最小宽度 */
#app .page_cart .warp,
#app .page_forum .warp > .container,
#app .page_notice .warp > .container,
#app .page_article .warp > .container,
#app .page_goods .warp > .container,
#app .page_user .warp > .container,
#app .page_order .warp > .container,
#app .page_pay .warp > .container,
#app .page_search .warp > .container,
#app .diy_list .warp > .container,
#app .diy_details .warp > .container,
#app .diy_edit .warp > .container,
#message_list .warp > .container {
  max-width: 1500px;
  min-width: 1000px;
  padding-top: 20px !important;
  background-color: transparent !important;
}

/*********************************** 搜索结果 **********************************/
#app .page_search {
  padding-bottom: 80px;
  background: #fff;
}
#app .page_search .card_result_search {
  padding: 30px 0 0;
  margin: 30px 0;
  background-color: #fff;
  border-radius: 4px;
}
#app .page_search .card_result_search > .title, #app .page_search .card_result_search .iou .title {
  display: block !important;
  width: 150px;
  margin: 0 auto 30px;
  text-align: center;
}
#app .page_search .card_result_search .search_box {
  margin: 20px 30px;
}
#app .page_search .card_result_search .search_box .btn {
  right: 49px;
}
#app .page_search .card_result_search .list_result_search:nth-child(even) {
  background-color: #fafafa;
}
#app .page_search .card_result_search .list_result_search .title_type {
  padding: 15px;
  line-height: 18px;
}
#app .page_search .card_result_search .list_result_search .title_type:empty {
  padding: 0;
}
#app .page_search .card_result_search .list_result_search .no_result {
  padding: 20px;
  text-align: center;
}
#app .page_search .card_result_search .list_result_search .list_result {
  padding: 10px 0;
}
#app .page_search .card_result_search .list_result_search .list_result .item {
  margin: 0;
  padding: 10px 0;
}
#app .page_search .card_result_search .list_result_search .list_result .item .title {
  border-bottom: 0 none;
}
#app .page_search .card_result_search .list_result_search .list_result .item:hover {
  color: #0d6efd !important;
}
#app .page_search .pager {
  margin-top: 30px;
}

.page_root > .warp {
  margin-bottom: 0px;
}
.page_root .warp > .swiper_box {
  width: 100%;
  max-width: 100%;
  padding: 0;
}
.page_root .warp > .container {
  max-width: 1300px;
  min-width: 1000px;
}

/* **************************************************导航栏开始*********************************************** */
/* 头部导航区域 - 整体容器 */
.page_header .header_warp {
  position: relative;
  height: auto !important;
  background: linear-gradient(145deg, rgba(255,149,0,0.08) 0%, rgba(255,255,255,0.98) 100%) !important;
  backdrop-filter: blur(12px) !important;
  box-shadow: 0 8px 30px rgba(255,149,0,0.12) !important;
  border-bottom: 2px solid rgba(255,149,0,0.2) !important;
  z-index: 100;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.page_header .header_warp::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, #ff9500, transparent);
  opacity: 0.7;
}

.page_header .header_warp::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,149,0,0.5), transparent);
  animation: shimmerEffect 3s infinite linear;
}

@keyframes shimmerEffect {
  0% { background-position: -100% 0; }
  100% { background-position: 200% 0; }
}

.page_header .header_warp > .container {
  max-width: 100%;
  position: relative;
}

/* 头部主体区域 */
.page_header .my_header {
  height: auto !important;
  border-image: linear-gradient(135deg, #f1a0390%, #e67e00 100%) 1 !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative;
}

/* 顶部内容区域 */
.page_header .conton-top {
  display: grid;
  grid-template-columns: 350px 1fr 350px !important;
  align-items: center;
  margin: 0 4% !important;
  height: 90px !important;
  position: relative;
}

/* Logo 样式 */
.page_header .conton-top > a .logo {
  float: none;
  position: relative;
  display: block;
  height: auto;
  /* padding-left: 55px; */
  /* font-size: 26px !important; */
  font-weight: 800;
  color: #f1a039!important;
  letter-spacing: -0.5px !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.1);
  transition: all 0.3s ease !important;
}

.page_header .conton-top > a:hover .logo {
  transform: translateY(-2px) !important;
  color: #e67e00 !important;
}

.page_header .conton-top > a .logo::before {
  content: "";
  position: absolute;
  left: -45px;
  top: 40%;
  width: 48px !important;
  height: 48px !important;
  margin-top: -17px;
  background: url(../img/logo1.png) no-repeat center;
  background-position: center;
  background-size: contain;
  filter: drop-shadow(0 3px 5px rgba(255,149,0,0.3)) !important;
  animation: logoFloat 4s ease-in-out infinite !important;
}

.page_header .conton-top > a .logo::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: -50px;
  width: 100%;
  height: 3px;
  background: #ff9500;
  border-radius: 3px;
  transition: width 0.3s ease;
}

.page_header .conton-top > a:hover .logo::after {
  width: 60px;
}

@keyframes logoFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(2deg); }
}

/* 搜索框样式 */
.page_header .conton-top .search-box {
  display: block !important;
  position: relative;
  top: auto;
  right: auto;
  left: auto;
  bottom: auto;
  width: auto !important;
  height: 52px !important;
  margin: 0 20px;
  /* border: 2px solid rgba(255,149,0,0.3) !important;
  border-radius: 26px !important; */
  transition: all 0.3s ease !important;
  background: rgba(255,255,255,0.95) !important;
  box-shadow: 0 4px 15px rgba(255,149,0,0.1) !important;
  overflow: hidden;
}

.page_header .conton-top .search-box:focus-within {
  box-shadow: 0 8px 25px rgba(255,149,0,0.2) !important;
  transform: translateY(-2px);
  border-color: rgba(255,149,0,0.6) !important;
}

/* .page_header .conton-top .search-box::before {
  content: "";
  position: absolute;
  top: -10px;
  right: -10px;
  width: 40px;
  height: 40px;
  background: radial-gradient(circle, rgba(255,149,0,0.2) 0%, rgba(255,149,0,0) 70%);
  z-index: -1;
  animation: pulseGlow 3s infinite ease-in-out;
} */

@keyframes pulseGlow {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.2); }
}

.page_header .conton-top .search-box .search-txt {
  flex: 1;
  min-width: 100%;
  padding-right: 75px !important;
  padding-left: 25px;
  height: 100% !important;
  font-size: 16px !important;
  color: #2d3748 !important;
  background: none;
  border: none;
  transition: all 0.3s ease;
}

.page_header .conton-top .search-box .search-txt::-moz-placeholder {
  color: #8a929b;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.page_header .conton-top .search-box .search-txt::placeholder {
  color: #8a929b;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.page_header .conton-top .search-box .search-txt:focus::-moz-placeholder {
  opacity: 0.4;
}

.page_header .conton-top .search-box .search-txt:focus::placeholder {
  opacity: 0.4;
}

.page_header .conton-top .search-box .search-txt:focus {
  border: none;
  outline: none;
}

.page_header .conton-top .search-box .search-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  flex-shrink: 0;
  background: linear-gradient(135deg, #ff9500, #e67e00) !important;
  height: 36px !important;
  width: 70px !important;
  border-radius: 18px !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 3px 8px rgba(255,149,0,0.3);
  overflow: hidden;
}

.page_header .conton-top .search-box .search-btn::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  background-image: url(../img/icon_search_white.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  z-index: 2;
  transition: all 0.3s ease;
}

.page_header .conton-top .search-box .search-btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.2), rgba(255,255,255,0));
  transition: all 0.6s ease;
}

.page_header .conton-top .search-box .search-btn:hover::after {
  left: 100%;
}

.page_header .conton-top .search-box .search-btn:hover {
  transform: translateX(-2px) !important;
  background: linear-gradient(135deg, #ff9f1a, #ff9500) !important;
}

.page_header .conton-top .search-box .search-btn:active {
  transform: scale(0.96) translateX(-2px) !important;
}

.page_header .conton-top .search-box .search-btn svg {
  display: none;
}

/* 用户区域样式 */
.page_header .conton-top .user {
  position: relative;
  top: auto;
  right: auto;
  left: auto;
  bottom: auto;
  height: auto;
  display: flex;
  justify-content: flex-end;
  color: #5e6671;
}

.page_header .conton-top .user .ml {
  position: relative;
  padding: 0 45px;
  height: 38px;
  line-height: 38px;
  color: #f1a039!important;
  border-radius: 10px !important;
  margin: 0 8px;
  background: rgba(255,149,0,0.08) !important;
  transition: all 0.3s ease !important;
  overflow: hidden;
}

.page_header .conton-top .user .ml::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.2), rgba(255,255,255,0));
  transition: all 0.6s ease;
}

.page_header .conton-top .user .ml:hover::after {
  left: 100%;
}

.page_header .conton-top .user .ml:hover {
  background: rgba(255,149,0,0.15) !important;
  transform: translateY(-2px) !important;
  color: #e67e00 !important;
}

.page_header .conton-top .user .ml:nth-child(1):before {
  position: absolute;
  top: 50%;
  left: 0px;
  width: 40px;
  height: 40px;
  margin-top: -20px;
  background: url(../img/bcc.png) no-repeat center;
  background-color: #ff9500;
  background-size: 59% 59%;
  border-radius: 50%;
  transition: all 0.3s ease;
  box-shadow: 0 3px 10px rgba(255,149,0,0.3);
}

.page_header .conton-top .user .ml:hover:nth-child(1):before {
  transform: scale(1.1) rotate(10deg);
}

.page_header .conton-top .user .ml:nth-child(2):before {
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 16px;
  margin-top: -8px;
  background-color: rgba(255,149,0,0.3);
}

/* 用户登录后样式 - 全新设计 */
.page_header .conton-top .user .own .user_pr {
  display: flex;
  align-items: center;
  padding: 6px 10px 6px 6px;
  background: white !important;
  border: 2px solid #f1a039!important;
  border-radius: 30px !important;
  box-shadow: 0 4px 12px rgba(255,149,0,0.15) !important;
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  overflow: hidden;
}

/* Background pattern */
.page_header .conton-top .user .own .user_pr::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(circle at 20% 30%, rgba(255,149,0,0.08) 0%, transparent 10%),
    radial-gradient(circle at 80% 70%, rgba(255,149,0,0.08) 0%, transparent 10%);
  background-size: 15px 15px;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

/* Hover state */
.page_header .conton-top .user .own:hover .user_pr {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(255,149,0,0.25) !important;
  padding-right: 14px;
}

.page_header .conton-top .user .own:hover .user_pr::before {
  opacity: 1;
}

/* Active state */
.page_header .conton-top .user .own:active .user_pr {
  transform: translateY(1px);
  box-shadow: 0 2px 8px rgba(255,149,0,0.2) !important;
}

/* Profile image container */
.page_header .conton-top .user .own .img_box {
  width: 38px;
  height: 38px;
  margin-right: 12px;
  background: linear-gradient(135deg, #ff9500, #e67e00);
  border-radius: 50%;
  transition: all 0.4s ease;
  position: relative;
  transform-origin: center;
  overflow: hidden;
}

/* Ring animation */
.page_header .conton-top .user .own .img_box::before {
  content: "";
  position: absolute;
  inset: -4px;
  border: 2px solid rgba(255,149,0,0.6);
  border-radius: 50%;
  opacity: 0;
  z-index: 5;
  transition: all 0.5s ease;
  animation: none;
}

.page_header .conton-top .user .own:hover .img_box::before {
  opacity: 1;
  animation: pulse-ring 2s infinite;
}

@keyframes pulse-ring {
  0% { transform: scale(0.95); opacity: 0.7; }
  50% { transform: scale(1.05); opacity: 0.3; }
  100% { transform: scale(0.95); opacity: 0.7; }
}

/* Profile image */
.page_header .conton-top .user .own .img_box img {
  display: block;
  width: calc(100% - 4px) !important;
  height: calc(100% - 4px) !important;
  margin: 2px;
  object-fit: cover;
  border-radius: 50%;
  transition: all 0.4s ease;
  position: relative;
  z-index: 2;
}

.page_header .conton-top .user .own:hover .img_box img {
  transform: scale(1.1);
}

/* Text styling */
.page_header .conton-top .user .own .own_text {
  font-size: 15px;
  line-height: 20px;
  color: #444;
  font-weight: 600;
  transition: all 0.35s ease;
  position: relative;
  padding-right: 5px;
}

.page_header .conton-top .user .own:hover .own_text {
  color: #ff9500;
}

/* Custom caret redesign */
.page_header .conton-top .user .own .caret {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-left: 6px;
  position: relative;
  transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.page_header .conton-top .user .own .caret::before,
.page_header .conton-top .user .own .caret::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 2px;
  top: 50%;
  background-color: #ff9500;
  border-radius: 1px;
  transition: all 0.3s ease;
}

.page_header .conton-top .user .own .caret::before {
  left: 4px;
  transform: translateY(-50%) rotate(45deg);
}

.page_header .conton-top .user .own .caret::after {
  right: 4px;
  transform: translateY(-50%) rotate(-45deg);
}

.page_header .conton-top .user .own:hover .caret {
  transform: translateY(2px);
}

.page_header .conton-top .user .own:hover .caret::before {
  transform: translateY(-50%) rotate(-45deg);
}

.page_header .conton-top .user .own:hover .caret::after {
  transform: translateY(-50%) rotate(45deg);
}

/* Notification indicator */
.page_header .conton-top .user .own .user_pr::after {
  content: "";
  position: absolute;
  top: -2px;
  right: -2px;
  width: 10px;
  height: 10px;
  background: #ff9500;
  border-radius: 50%;
  border: 2px solid white;
  transform: scale(0);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.page_header .conton-top .user .own.has-notification .user_pr::after {
  transform: scale(1);
}

/* 下拉菜单样式 */
.page_header .conton-top .user .dropdown {
  top: 100%;
  left: auto;
  right: 0;
  z-index: 10;
  border-radius: 15px !important;
  box-shadow: 0 15px 35px rgba(0,0,0,0.15) !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,149,0,0.15) !important;
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,0.95);
  transform-origin: top center;
  animation: dropdownAppear 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes dropdownAppear {
  from { transform: translateY(-10px) scale(0.95); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

.page_header .conton-top .user .dropdown .my_item {
  padding: 14px 20px !important;
  transition: all 0.25s ease !important;
  border-bottom: 1px solid rgba(255,149,0,0.08);
  position: relative;
  overflow: hidden;
}

.page_header .conton-top .user .dropdown .my_item:last-child {
  border-bottom: none;
}

.page_header .conton-top .user .dropdown .my_item::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.2), rgba(255,255,255,0));
  transition: all 0.6s ease;
}

.page_header .conton-top .user .dropdown .my_item:hover::after {
  left: 100%;
}

.page_header .conton-top .user .dropdown .my_item:hover {
  background: rgba(255,149,0,0.08) !important;
  padding-left: 25px !important;
}

.page_header .conton-top .user .dropdown .my_item:first-child {
  border-radius: 15px 15px 0 0;
}

.page_header .conton-top .user .dropdown .my_item:first-child .router-link-exact-active {
  border-radius: 15px 15px 0 0;
}

.page_header .conton-top .user .dropdown .my_item:last-child {
  border-radius: 0 0 15px 15px;
}

.page_header .conton-top .user .dropdown .my_item:last-child .router-link-exact-active {
  border-radius: 0 0 15px 15px;
}

.page_header .conton-top .user .dropdown .my_item:first-child:last-child {
  border-radius: 15px;
}

.page_header .conton-top .user .dropdown .my_item:first-child:last-child .router-link-exact-active {
  border-radius: 15px;
}

.page_header .conton-top .user .dropdown .my_item a, 
.page_header .conton-top .user .dropdown .my_item div {
  color: #333 !important;
  background: linear-gradient(121deg, rgba(255,149,0,0.1), rgba(255,149,0,0.05));
  position: relative;
  transition: all 0.25s ease !important;
  /* padding: 8px 15px; */
  border-radius: 8px;
}

.page_header .conton-top .user .dropdown .my_item a::before, 
.page_header .conton-top .user .dropdown .my_item div::before {
  content: "→";
  position: absolute;
  left: -15px;
  opacity: 0;
  transition: all 0.25s ease;
  color: #ff9500;
}

.page_header .conton-top .user .dropdown .my_item:hover a::before, 
.page_header .conton-top .user .dropdown .my_item:hover div::before {
  left: -5px;
  opacity: 1;
}

.page_header .conton-top .user .dropdown .my_item:hover a,
.page_header .conton-top .user .dropdown .my_item:hover div {
  color: #f1a039!important;
  transform: translateX(5px);
}

.page_header .conton-top .user .dropdown .my_item .router-link-exact-active {
  color: #fff !important;
  background: linear-gradient(121deg, #ff9500, #e67e00);
  box-shadow: 0 4px 10px rgba(255,149,0,0.2);
}

.page_header .conton-top .user .dropdown .my_item .router-link-exact-active:hover {
  color: #fff !important;
}

/* 导航列表样式 */
.page_header .nav_list {
  display: flex;
  justify-content: center;
  float: none !important;
  border: none;
  flex-direction: column;
  position: relative;
}

.page_header .nav_list::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,149,0,0.2), transparent);
}

.page_header .nav_list ul {
  display: flex;
  justify-content: center;
  /* padding: 0 5% !important; */
  background: linear-gradient(to right, rgba(255,255,255,0.8) 0%, rgba(255,149,0,0.05) 50%, rgba(255,149,0,0.1) 100%) !important;
  position: relative;
}

.page_header .nav_list ul::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,149,0,0.1), transparent);
}

.page_header .nav_list ul li {
  display: flex;
  align-items: center;
  margin-right: 0;
  height: 50px;
  margin: 0 8px;
  position: relative;
}

.page_header .nav_list ul li a, 
.page_header .nav_list ul li span {
  position: relative;
  display: flex;
  width: auto;
  height: 38px;
  padding: 0 10px;
  line-height: 36px;
  text-decoration: none;
  text-transform: capitalize;
  color: #444 !important;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 15px;
  font-weight: 600;
  align-items: center;
  transition: all 0.3s ease !important;
  letter-spacing: 0.2px;
  z-index: 1;
}

.page_header .nav_list ul li a::before,
.page_header .nav_list ul li span::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255,149,0,0);
  border-radius: 19px;
  z-index: -1;
  transition: all 0.3s ease;
  transform: scale(0.9);
}

.page_header .nav_list ul li a::after,
.page_header .nav_list ul li span::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 3px;
  background: #ff9500;
  transition: all 0.3s ease !important;
  border-radius: 3px;
  opacity: 0;
}

.page_header .nav_list ul li a:hover,
.page_header .nav_list ul li span:hover {
  color: #f1a039!important;
  transform: translateY(-2px);
  font-weight: bold !important;
}

.page_header .nav_list ul li a:hover::before,
.page_header .nav_list ul li span:hover::before {
  background: rgba(255,149,0,0.08);
  transform: scale(1);
}

.page_header .nav_list ul li a:hover::after,
.page_header .nav_list ul li span:hover::after {
  width: calc(100% - 30px) !important;
  left: 15px !important;
  opacity: 1;
}

.page_header .nav_list ul li .router-link-exact-active {
  color: #f1a039!important;
  font-weight: 700 !important;
}

.page_header .nav_list ul li .router-link-exact-active::before {
  background: rgba(255,149,0,0.1);
  transform: scale(1);
}

.page_header .nav_list ul li .router-link-exact-active::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 15px;
  width: calc(100% - 30px);
  height: 3px;
  background: #ff9500;
  border-radius: 3px;
  opacity: 1;
  animation: navActivePulse 2s infinite;
}

@keyframes navActivePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* 小屏幕导航按钮 */
.page_header .mini_nav {
  position: absolute;
  top: 15px;
  right: 20px;
  color: #ff9500;
  background: rgba(255,255,255,0.95) !important;
  padding: 10px 18px !important;
  border-radius: 30px !important;
  box-shadow: 0 5px 15px rgba(255,149,0,0.15) !important;
  border: 1px solid rgba(255,149,0,0.15);
  backdrop-filter: blur(5px);
  transition: all 0.3s ease;
  z-index: 5;
}

.page_header .mini_nav:hover {
  box-shadow: 0 8px 20px rgba(255,149,0,0.2) !important;
  transform: translateY(-2px);
  cursor: pointer;
}

.page_header .mini_nav::after {
  content: "";
  position: absolute;
  top: -5px;
  right: -5px;
  width: 12px;
  height: 12px;
  background: #ff9500;
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(255,149,0,0.2);
  animation: pulseNotification 2s infinite;
}

@keyframes pulseNotification {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.2); opacity: 0.7; }
}

/* 下拉菜单样式 */
.el-dropdown-menu {
  border: 0 none;
  font-family: "Pingfang SC", "Microsoft Yahei", Arial;
  border-radius: 15px !important;
  box-shadow: 0 15px 35px rgba(0,0,0,0.15) !important;
  overflow: hidden !important;
  border: 1px solid rgba(255,149,0,0.15) !important;
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,0.95);
  animation: dropdownAppear 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.el-dropdown-menu .dro {
  display: flex;
  flex-direction: column;
  background: transparent;
}

.el-dropdown-menu .dro .dro_li {
  float: none;
  display: flex;
  align-items: center;
  padding: 0;
  text-align: left;
  border-bottom: 1px solid rgba(255,149,0,0.08);
  transition: all 0.25s ease !important;
  position: relative;
  overflow: hidden;
}

.el-dropdown-menu .dro .dro_li:last-child {
  border-bottom: none;
}

.el-dropdown-menu .dro .dro_li::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.2), rgba(255,255,255,0));
  transition: all 0.6s ease;
}

.el-dropdown-menu .dro .dro_li:hover::after {
  left: 100%;
}

.el-dropdown-menu .dro .dro_li i {
  display: none;
}

.el-dropdown-menu .dro .dro_li a {
  flex: 1;
  display: block;
  padding: 0 15px;
  white-space: nowrap;
  width: 140px;
  height: 45px;
  font-size: 14px;
  line-height: 45px;
  position: relative;
  transition: all 0.25s ease;
  color: #333 !important;
}

.el-dropdown-menu .dro .dro_li a::before {
  content: "→";
  position: absolute;
  left: -15px;
  opacity: 0;
  transition: all 0.25s ease;
  color: #ff9500;
}

.el-dropdown-menu .dro .dro_li:hover {
  background: rgba(255,149,0,0.08);
}

.el-dropdown-menu .dro .dro_li:hover a {
  color: #f1a039!important;
  transform: translateX(5px);
  padding-left: 20px;
}



.banner {
  background: #e5ebe8 !important;
  /* 首页轮播图里的箭头浮标 */
  /* 轮播图里面的小圆点 */
}
.banner > .container {
  max-width: 100% !important;
}
.banner .row {
  margin: 0 !important;
}
.banner .sw_no {
  display: block;
  margin: 0 !important;
}
.banner .sw_no .swiper_img {
  height: 100%;
  width: 100%;
}
/* .banner .sw_no .swiper_img .carousel-inner:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.1);
  z-index: 1;
} */
.banner .sw_no .swiper_img .carousel-item {
  border-radius: 0;
}
.banner .sw_no .swiper_img .swiper-imgs {
  border-radius: 0;
}
.banner .sw_no .swiper_img .carousel .carousel-control-prev, .banner .sw_no .swiper_img .carousel .carousel-control-next {
  top: auto;
  bottom: 30px;
  width: 60px;
  height: 60px;
  padding: 4px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  opacity: 1;
  display: none;
}
.banner .sw_no .swiper_img .carousel .carousel-control-prev:hover, .banner .sw_no .swiper_img .carousel .carousel-control-next:hover {
  background: rgba(0, 0, 0, 0.6);
}
.banner .sw_no .swiper_img .carousel .carousel-control-prev {
  left: auto;
  right: 130px;
}
.banner .sw_no .swiper_img .carousel .carousel-control-next {
  left: auto;
  right: 40px;
}
.banner .sw_no .swiper_img .carousel .carousel-inner .carousel-item .swiper-imgs {
  height: 25rem;
  background-size: 100% 100%;
}
.banner .sw_no .swiper_img .carousel .carousel-inner .carousel-item .swiper-imgs:hover {
  cursor: pointer;
}
.banner .carousel-control-next-icon,
.banner .carousel-control-prev-icon {
  width: 24px;
  height: 24px;
  background: url(../img/icon_arrow.svg) no-repeat;
  background-position: center;
  background-size: contain;
}
.banner .carousel-control-next-icon {
  transform: rotate(180deg);
}
.banner .carousel-control-prev-icon {
  transform: rotate(0deg);
}
.banner .carousel-indicators {
  position: absolute;
  /* top: 0; */
  right: 0;
  /* bottom: -350px; */
  left: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0;
}
.banner .carousel-indicators li {
  border-radius: 2px;
  margin: 5px;
  width: 8px !important;
  height: 8px !important;
  text-indent: -999px;
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.3);
  border: 1px solid #F5F4ED !important;
  opacity: 1;
}
.banner .carousel-indicators li:hover, .banner .carousel-indicators li.active {
  background-color: #fff;
  border: 1px solid #fff !important;
}

.page_root .warp .swiper_box .sw_no .card_notice {
  width: 80%;
  box-sizing: border-box;
  position: absolute;
  background: #fff;
  top: 340px;
  left: 10%;
  z-index: 999;
  height: 120px;
  padding-left: 0;
  border-radius: 5px;
  box-shadow: #ccc 5px 5px 15px;
}
.page_root .warp .swiper_box .sw_no .card_notice:after {
  
}
.page_root .warp .swiper_box .sw_no .card_notice .notice_title {
  position: relative;
  height: 140px;
  line-height: 83px;
  font-size: 16px;
  text-align: center;
  background-color: #fff;
  color: #fff;
  font-size: 20px;
  display: block;
  justify-content: center;
  width: 20%;
  float: left;
  margin-left: 10%;
  background: linear-gradient(121deg, #fe9760, #e01c2a);
  margin-top: -10px;
  border-radius: 10px;
}
.page_root .warp .swiper_box .sw_no .card_notice .notice_title::before {
  position: absolute;
  content: "";
  height: 30px;
  width: 30px;
  top: 20%;
  left: 18%;
  opacity: 1;
  background-image: url("../img/icon_quote.svg");
  background-size: contain;
}
.page_root .warp .swiper_box .sw_no .card_notice .notice_title::after{
	/* content: "NOTICE"; */
	font-size: 14px;
	color: #eee;
	font-weight: normal;
	display: block;
	line-height: normal;
	margin-top: -40px;
	margin-left: -30px;
}
.page_root .warp .swiper_box .sw_no .card_notice .notice_title a {
  visibility: visible;
  color: #666 !important;
  font-size: 14px;
  font-weight: normal;
  width: 100% !important;
  line-height: 43px;
  height: 43px;
  text-align: center;
  border-radius: 10px;
  position: absolute;
  top: 50px;
  left: -75%;
  z-index: 999999;
  transition: 0.3s;
  width: 10%;
  
}
.page_root .warp .swiper_box .sw_no .card_notice .notice_title a:hover {
  background: none;
  color: #e01c2a !important;
}
.page_root .warp .swiper_box .sw_no .card_notice .carousel-inner {
  position: absolute;
  height: 300px;
  /* top: -150px; */
}
.page_root .warp .swiper_box .sw_no .card_notice .carousel {
  width: 70%;
  float: left;
  height: 120px;
  overflow: hidden;
}
.page_root .warp .swiper_box .sw_no .card_notice .carousel .carousel-item {
  padding: 10px;
  height: 120px;
}
.page_root .warp .swiper_box .sw_no .card_notice .carousel .carousel-item:hover {
  
}
.page_root .warp .swiper_box .sw_no .card_notice .carousel .carousel-item .swiper_notice .title {
  text-align: left;
  font-size: 16px;
  color: #333;
  position: relative;
  margin-left: 0;
  padding: 0px !important;
}
.page_root .warp .swiper_box .sw_no .card_notice .carousel .carousel-item .swiper_notice .content {
  display: -webkit-box;
  overflow: hidden;
  padding: 0;
  /* height: 60px; */
  font-size: 14px;
}
.page_root .warp .swiper_box .sw_no .card_notice .carousel .carousel-item .swiper_notice .content p{
	
}
.page_root .warp .swiper_box .sw_no .card_notice .carousel .carousel-item .swiper_notice .content h3{
	font-size: 14px;
}

#app {
  box-sizing: border-box;
  font-style: normal;
  font-family: Arial, Helvetica, sans-serif;
  padding-top: 130px;
  background-color: #f5f5f5;
}
#app .support_entry {
  border-radius: 100%;
  border: 1px solid #ccc;
  top: 500px;
}
#app .space {
  display: none;
}
#app .adver {
  display: none;
}

.page_root .list_goods,
.page_root .list_article,
.page_root .diy_home {
  width: 100%;
  padding-bottom: 80px;
}
.page_root .product {
  background-color: rgba(255, 149, 0, 0.2);
}
.page_root .product .carousel {
  height: auto !important;
  margin: 0 50px;
  padding-bottom: 50px;
  z-index: 999;
}
.page_root .product .carousel .slider{
	position: relative;
	border-radius: 0;
	width: auto;
	height: auto;
	background: transparent;
	box-shadow: none;
}
.page_root .product .carousel .slider:hover{
	background: none;
}
.page_root .product .carousel .slide {
  position: relative;
  margin: 0 30px !important;
  width: calc(25% - 60px) !important;
  overflow: hidden;
  border: 2px solid #ed5141;
  border-radius: 10px;
}

.next[data-v-23328ffd]{
  right: 1px !important;
}

/* 轮播导航按钮容器 */
.page_root .product .carousel .prev, 
.page_root .product .carousel .next {
    bottom: -30px; /* 下移增加空间 */
    width: 40px;
    height: 40px;
    border: 2px solid #ff9500;
    border-radius: 50%;
    background: rgba(255,149,0,0.1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(255,149,0,0.1);
}

/* 箭头图标重构 */
.page_root .product .carousel .prev:before,
.page_root .product .carousel .next:before {
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    border-left: 3px solid #ff9500;
    border-bottom: 3px solid #ff9500;
    transform-origin: center;
    transition: all 0.3s;
}

/* 左侧箭头方向 */
.page_root .product .carousel .prev:before {
    transform: translate(-50%, -50%) rotate(45deg);
}

/* 右侧箭头方向 */
.page_root .product .carousel .next:before {
    transform: translate(-50%, -50%) rotate(-135deg);
}

/* 悬停动效 */
.page_root .product .carousel .prev:hover,
.page_root .product .carousel .next:hover {
    background: #ff9500;
    box-shadow: 0 4px 16px rgba(255,149,0,0.3);
    
    /* 悬浮外发光 */
    &::after {
        content: '';
        position: absolute;
        top: -6px;
        left: -6px;
        right: -6px;
        bottom: -6px;
        border: 2px solid rgba(255,149,0,0.2);
        border-radius: 50%;
        animation: pulse 1.5s infinite;
    }
}

/* 悬停时箭头变化 */
.page_root .product .carousel .prev:hover:before,
.page_root .product .carousel .next:hover:before {
    border-color: #fff;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

/* 点击反馈 */
.page_root .product .carousel .prev:active,
.page_root .product .carousel .next:active {
    transform: scale(0.92);
    box-shadow: 0 2px 6px rgba(255,149,0,0.2);
}

/* 悬浮外发光动画 */
@keyframes pulse {
    0% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.3); }
}
.page_root .product .list_goods .lis_cont {
  display: block;
}
.page_root .article_s {
  background: #fff;
  background-size: 100% 100%;
  padding: 0 0 60px;
}
.page_root .ins {
  padding-bottom: 60px;
  background: #fff !important;
}
.page_root .ins .container {
  padding: 0 !important;
}
.page_root .ins .container .row {
  margin: 0 !important;
}
.page_root .ins.model1 {
  background: rgba(255, 149, 0, 0.2) !important;
}


.page_root .ins.model1 .list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin: 60px auto;
  position: relative;
}

/* 隐藏第七项之后的元素 */
.page_root .ins.model1 .list > *:nth-child(n+7) {
  display: none !important;
}

/* 基础卡片样式 */
.page_root .ins.model1 .list > *:nth-child(-n+6) {
  position: relative;
  transition: all 0.4s cubic-bezier(0.34, 1, 0.64, 1);
  transform-origin: center bottom;
}

/* 创建交错布局 */
.page_root .ins.model1 .list > *:nth-child(3n+1) {
  transform: translateY(20px) rotate(-2deg);
}
.page_root .ins.model1 .list > *:nth-child(3n+2) {
  transform: translateY(-15px) rotate(2deg);
}
.page_root .ins.model1 .list > *:nth-child(3n+3) {
  transform: translateY(10px) rotate(-1deg);
}

/* 悬停复位效果 */
.page_root .ins.model1 .list > *:nth-child(-n+6):hover {
  transform: translateY(0) rotate(0) scale(1.05);
  z-index: 2;
  box-shadow: 
      0 12px 40px rgba(255,149,0,0.15),
      inset 0 0 0 1px rgba(255,149,0,0.1);
}

/* 动态投影 */
.page_root .ins.model1 .list > *:nth-child(-n+6)::before {
  content: "";
  position: absolute;
  top: 8%;
  left: 5%;
  width: 90%;
  height: 90%;
  background: rgba(255,149,0,0.05);
  filter: blur(15px);
  transition: all 0.4s ease;
  z-index: -1;
}

.page_root .ins.model1 .list > *:nth-child(-n+6):hover::before {
  opacity: 0;
  transform: scale(0.9);
}
.page_root .ins.model2 {
  position: relative;
}
.page_root .ins.model2 .list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 0 auto;
}
.page_root .ins.model2 .list .goods {
  height: 250px !important;
  min-height: 250px !important;
  position: relative;
  z-index: 999;
}
.article_s .table_article,
.diy_view_table,
.ins .ins_s {
  display: none;
}

.diy_recommend .switch, .article_recommend .switch {
  display: none;
}

.product .table_goods,
.product .goods_c,
.product .paginations {
  display: none !important;
}

.ins_s .slider {
  padding: 0px 50px;
}
.ins_s .slider .slide {
  width: calc(26.5% - 1rem);
  background-color: #fff;
  margin-right: 10px;
  border: 2px dashed #041126;
}
.ins_s .diy_img {
  height: 200px;
  width: 250px;
  margin: 2px auto;
}
.ins_s.carousel {
  height: auto !important;
}
.ins_s .paginations {
  display: none !important;
}

.support_entry {
  top: auto !important;
  bottom: 0 !important;
}

.robotic {
  top: auto !important;
  left: auto !important;
  bottom: 100px !important;
  right: 0 !important;
  width: 50px !important;
  height: 50px !important;
  transition: transform 0.2s;
}
.robotic:hover {
  transform: translateY(-2px);
}

/* 底部主容器 */
.page_footer {
  position: relative !important;
  overflow: hidden !important;
  /* padding: 100px 0 60px !important; */
  background: #0a0a1a !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
}

/* 背景渐变装饰 */
.page_footer::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: 
  linear-gradient(120deg, rgba(255, 149, 0, 0.08), transparent 70%) !important, /* 修改 */
  linear-gradient(240deg, rgba(255, 149, 0, 0.05), transparent 70%) !important, /* 修改 */
    radial-gradient(circle at 20% 80%, rgba(106, 77, 255, 0.05) 0%, transparent 50%) !important;
  z-index: 0 !important;
}

/* 装饰性背景元素 */
.page_footer::after {
  content: "EXPLORE" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-size: 200px !important;
  font-weight: 900 !important;
  opacity: 0.03 !important;
  letter-spacing: 30px !important;
  pointer-events: none !important;
  background: linear-gradient(to right, rgba(255, 149, 0, 0.2), rgba(255, 149, 0, 0.05)) !important; /* 修改 */
  color: transparent !important;
}

/* 容器布局 */
.page_footer .container {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  flex-direction: column-reverse !important;
  justify-content: center !important;
  padding: 0 !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
}

/* 友情链接区域 */
.page_footer .card_link {
  background: #ececec !important;
  border-radius: 24px !important;
  padding: 40px !important;
  border: 1px solid rgba(255, 149, 0, 0.1) !important; /* 修改 */
}

.page_footer .card_link .list_link .row_link {
  /* display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important; */
  gap: 60px !important;
  padding: 30px !important;
  border-radius: 20px !important;
  background: #f1a039!important;
  border: 1px solid rgba(255, 149, 0, 0.1) !important; /* 修改 */
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  align-content: center;
  justify-content: center;
}

/* 链接项样式 */
.page_footer .card_link .list_link .row_link .link {
  position: relative !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.page_footer .card_link .list_link .row_link .link:hover {
  transform: translateY(-8px) !important;
}

.page_footer .card_link .list_link .row_link .link .img_box {
  width: 130px !important;
  height: 95px !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  transition: all 0.4s ease !important;
  box-shadow: 0 12px 24px rgba(255, 149, 0, 0.15) !important; /* 修改 */
  border: 1px solid rgba(255, 149, 0, 0.1) !important; /* 修改 */
}

.page_footer .card_link .list_link .row_link .link:hover .img_box {
  box-shadow: 0 15px 30px rgba(255, 149, 0, 0.25) !important; /* 修改 */
  border-color: rgba(255, 149, 0, 0.3) !important; /* 修改 */
}

.page_footer .card_link .list_link .row_link .link .link_name {
  padding-top: 15px !important;
  font-size: 14px !important;
  color: rgba(255, 255, 255, 0.85) !important;
  text-align: center !important;
  transition: all 0.3s ease !important;
  font-weight: 500 !important;
}

.page_footer .card_link .list_link .row_link .link:hover .link_name {
  color: #000 !important; /* 修改 */
}

/* 版权信息区域 */
.page_footer .card_copyright {
  position: relative !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  gap: 40px !important;
  /* margin-top: 80px !important; */
  padding: 40px 0 !important;
  border-top: 1px solid rgba(255, 149, 0, 0.1) !important; /* 修改 */
  background: rgba(10, 10, 26, 0.95) !important;
}

.page_footer .card_copyright > div {
  position: relative !important;
  padding: 25px !important;
  text-align: center !important;
  color: rgba(255, 255, 255, 0.7) !important;
  transition: all 0.3s ease !important;
  border-radius: 16px !important;
  background: rgba(106, 77, 255, 0.02) !important;
}

/* 版权信息装饰 */
.page_footer .card_copyright > div::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 50px !important;
  height: 3px !important;
  background: linear-gradient(to right, #ff9500, rgba(255, 149, 0, 0.5)) !important; /* 修改 */
  border-radius: 3px !important;
}

/* 版权信息文字 */
.page_footer .card_copyright .is1::after {
  content: "网站导航\A Navigation\A\A • 首页\A • 关于我们\A • 服务\A • 产品" !important;
  white-space: pre !important;
  font-size: 14px !important;
  line-height: 2 !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

.page_footer .card_copyright .is2::after {
  content: "版权声明\A Copyright\A\A • 用户协议\A • 隐私政策\A • 免责声明\A • 版权所有" !important;
  white-space: pre !important;
  font-size: 14px !important;
  line-height: 2 !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

.page_footer .card_copyright .is3::after {
  content: "联系我们\A Contact\A\A • 客服支持\A • 商务合作\A • 建议反馈\A • 加入我们" !important;
  white-space: pre !important;
  font-size: 14px !important;
  line-height: 2 !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

.page_footer .card_copyright .is4::after {
  content: "关于我们\A About\A\A • 公司简介\A • 发展历程\A • 新闻资讯\A • 合作伙伴" !important;
  white-space: pre !important;
  font-size: 14px !important;
  line-height: 2 !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

/* 添加悬浮效果 */
.page_footer .card_copyright > div:hover {
  transform: translateY(-5px) !important;
  background: rgba(255, 149, 0, 0.05) !important; /* 修改 */
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1) !important;
}

/* 添加动画效果 */
@keyframes fadeIn {
  from { 
    opacity: 0; 
    transform: translateY(30px); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0); 
  }
}

@keyframes glowPulse {
  0% { box-shadow: 0 0 20px rgba(255, 149, 0, 0.1); } /* 修改 */
  50% { box-shadow: 0 0 30px rgba(255, 149, 0, 0.2); } /* 修改 */
  100% { box-shadow: 0 0 20px rgba(255, 149, 0, 0.1); } /* 修改 */
}

.page_footer .container {
  animation: fadeIn 1s ease-out !important;
}

.page_footer .card_link {
  animation: glowPulse 3s infinite !important;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .page_footer .card_link .list_link .row_link {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important;
    gap: 20px !important;
  }
  
  .page_footer .card_copyright {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 30px !important;
  }
}



/* *****************************************论坛开始 ***************************************************/
/* 论坛页全息进化版 */
.page_forum {
  background: linear-gradient(45deg, #fffaf5, #fff5eb) !important;
  position: relative !important;
  overflow-x: hidden !important;
}

/* 全局动态星轨 */
.page_forum::before {
  content: '';
  position: fixed !important;
  top: -50vh !important;
  left: -50vw !important;
  width: 200vw !important;
  height: 200vh !important;
  background: radial-gradient(circle, rgba(255,149,0,0.03) 0%, transparent 60%) !important;
  animation: cosmicFlow 20s linear infinite !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

@keyframes cosmicFlow {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.2); }
  100% { transform: rotate(360deg) scale(1); }
}

/* 主卡片全息投影 */
.card_forum_list {
  border: 2px solid rgba(255,149,0,0.1) !important;
  background: linear-gradient(145deg, #ffffff, #ffffff) !important;
  box-shadow: 0 12px 40px rgba(255,149,0,0.1) !important;
  transform-style: preserve-3d !important;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1) !important;
  position: relative !important;
}

.card_forum_list:hover {
  transform: translateY(-8px) rotateX(1deg) rotateY(-1deg) !important;
  box-shadow: 0 20px 50px rgba(255,149,0,0.2) !important;
}

/* 搜索区霓虹光效 */
.search_box {
  border-bottom: 3px solid transparent !important;
  position: relative !important;
  overflow: hidden !important;
}

.search_box::after {
  content: '';
  position: absolute !important;
  bottom: -3px !important;
  left: 0 !important;
  width: 100% !important;
  height: 3px !important;
  background: linear-gradient(90deg, #ff9500, #ff7200, #ff9500) !important;
  animation: searchGlow 3s linear infinite !important;
}

@keyframes searchGlow {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* 下拉框全息设计 */
.search_box > select {
  border: 2px solid #f1a039!important;
  background: rgba(255,255,255,0.9) !important;
  backdrop-filter: blur(4px) !important;
  padding-left: 20px !important;
  font-weight: 500 !important;
  letter-spacing: 0.5px !important;
  transition: all 0.3s ease !important;
  height: 45px!important;
  margin-left: 10px!important;
}

.search_box > select:hover {
  box-shadow: 0 0 0 3px rgba(255,149,0,0.2) !important;
}

/* 发布按钮星际穿越效果 */
.add_forum {
  position: relative !important;
  overflow: hidden !important;
  border-radius: 12px !important;
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
}

.add_forum::before {
  /* content: ''; */
  position: absolute !important;
  top: -50% !important;
  left: -50% !important;
  width: 200% !important;
  height: 200% !important;
  background: conic-gradient(
    transparent, #ff9500, transparent 30%
  ) !important;
  animation: borderSpin 3s linear infinite !important;
}

@keyframes borderSpin {
  100% { transform: rotate(360deg); }
}

.add_forum:hover {
  transform: translateY(-5px) scale(1.05) !important;
  box-shadow: 0 10px 30px rgba(255,149,0,0.4) !important;
}

/* 论坛卡片星际之门效果 */
.item_forum {
  background: linear-gradient(145deg, #ffffff, #fff8f0) !important;
  border: 2px solid transparent !important;
  position: relative !important;
  overflow: visible !important;
}

.item_forum::after {
  content: '';
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 2px solid transparent !important;
  border-radius: 12px !important;
  animation: cardHalo 3s linear infinite !important;
  pointer-events: none !important;
}

@keyframes cardHalo {
  0%, 100% { border-color: rgba(255,149,0,0.1); }
  50% { border-color: rgba(255,149,0,0.3); }
}


/* 图片区效果 */
.img_block {
  position: relative !important;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1) !important;
  filter: brightness(0.98) !important;
}

/* .img_block::before {
  content: '';
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(45deg, rgba(255,149,0,0.1), transparent) !important;
} */

/* 内容区全息投影 */
.right_block {
  position: relative !important;
  background: linear-gradient(145deg, #ffffff, #fff8f0) !important;
}

.right_block::before {
  content: '';
  position: absolute !important;
  top: -2px !important;
  left: 0 !important;
  width: 100% !important;
  height: 4px !important;
  background: linear-gradient(90deg, #ff9500, #ff7200) !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
}

.item_forum:hover .right_block::before {
  opacity: 1 !important;
}

/* 标题星光效果 */
.top {
  position: relative !important;
}

.top::after {
  content: '✦';
  position: absolute !important;
  right: -25px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #f1a039!important;
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
}

.item_forum:hover .top::after {
  opacity: 1 !important;
}

/* 数据统计悬浮全息 */
.bottom {
  position: relative !important;
}

.bottom::before {
  content: '';
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(45deg, transparent, rgba(255,149,0,0.05)) !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
}

.item_forum:hover .bottom::before {
  opacity: 1 !important;
}

/* 标签超新星效果 */
.tag {
  /* position: relative !important; */
  overflow: hidden !important;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
}


.tag:hover::before {
  left: 100% !important;
}

/* 评论银河特效 */
.forum-detail-comment {
  background: linear-gradient(145deg, #ffffff, #fff8f0) !important;
  border: 2px solid rgba(255,149,0,0.1) !important;
  position: relative !important;
}

.forum-detail-comment::before {
  content: '';
  position: absolute !important;
  top: -2px !important;
  left: 0 !important;
  width: 100% !important;
  height: 4px !important;
  background: linear-gradient(90deg, #ff9500, #ff7200) !important;
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
}

.forum-detail-comment:hover::before {
  opacity: 1 !important;
}

/* 编辑器时空扭曲 */
.form_editor_block {
  border: 2px solid rgba(255,149,0,0.1) !important;
  background: linear-gradient(145deg, #ffffff, #fff8f0) !important;
  transition: all 0.4s ease !important;
}

.form_editor_block:hover {
  transform: perspective(1000px) rotateX(1deg) rotateY(-1deg) !important;
  box-shadow: 0 10px 30px rgba(255,149,0,0.1) !important;
}

/* 按钮量子纠缠效果 */
.submit_button {
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
}

.submit_button::after {
  content: '';
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 0 !important;
  height: 0 !important;
  background: rgba(255,255,255,0.2) !important;
  border-radius: 50% !important;
  transform: translate(-50%, -50%) !important;
  transition: width 0.3s ease, height 0.3s ease !important;
}

.submit_button:hover::after {
  width: 200% !important;
  height: 200% !important;
}

/* 滚动条星尘轨迹 */
.overflow-auto::-webkit-scrollbar-thumb {
  background: linear-gradient(45deg, #ff9500, #ff7200) !important;
  border-radius: 10px !important;
  box-shadow: inset 0 0 6px rgba(255,255,255,0.3) !important;
}

.page_forum .container .row .card_forum_list .search_box > button{
  right: 346px !important;
  position: absolute;
  /* right: 8px; */
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ff9500, #ff7200) !important;
  border: none;
  border-radius: 10px;
  color: #fff;
  cursor: pointer;
  transition: all 0.3sease;
}

.page_forum .container .row .card_forum_list .search_box > .add_forum{
  padding: 9px 0 0 0 !important;
  height: 45px!important;
  background: linear-gradient(45deg, #ff9500, #ff7200) !important;
}
.list_forum .tag{
  background: #f1a039!important;
}
/* *****************************************论坛结束 ***************************************************/






/* *****************************************************考试开始***************************************************** */
/* 考试列表包装器 */
#exam_list .warp {
  background-size: 100% 87% !important;
  min-height: 600px !important;
  position: relative !important;
}

#exam_list .warp::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 200px !important;
  background: linear-gradient(180deg, rgba(255, 149, 0, 0.05), transparent) !important;
  pointer-events: none !important;
}

/* 考试页面基础样式 */
.page_exam {
  padding-bottom: 40px;
  background: #fafafa !important;
  color: #2c3e50;
}

/* 表格头部样式优化 */
.page_exam .warp .exam_list_content .table_title .table_th {
  font-size: 16px;
  font-weight: 500;
  color: #fff !important;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg, #ff9500, #ff7200) !important;
  box-shadow: 0 4px 15px rgba(255, 149, 0, 0.2);
  padding: 16px 20px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 链接样式 */
.page_exam .warp .exam_list_content .answer_link {
  color: #f1a039!important;
  font-weight: 500;
  position: relative;
  text-decoration: none;
  transition: all 0.3s ease;
}

.page_exam .warp .exam_list_content .answer_link:hover {
  color: #ff7200 !important;
  transform: translateY(-1px);
}

.page_exam .warp .exam_list_content .answer_link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: #ff9500;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.page_exam .warp .exam_list_content .answer_link:hover::after {
  width: 100%;
}

/* 表格样式优化 */
.page_exam .warp .exam_list_content td,
.page_exam .warp .exam_list_content th {
  padding: 20px;
  text-align: center !important;
  border: 1px solid #edf2f7;
  transition: all 0.3s ease;
  font-size: 15px;
}

.page_exam .warp .exam_list_content tr {
  transition: all 0.3s ease;
}

.page_exam .warp .exam_list_content tr:hover td {
  background-color: rgba(255, 149, 0, 0.05);
  transform: scale(1.01);
}

/* 考试详情卡片样式 */
.page_exam .exam-detail {
  background: #fff;
  border-radius: 20px;
  margin: 0 auto;
  padding: 40px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(255, 149, 0, 0.1);
  position: relative;
  overflow: hidden;
}

.page_exam .exam-detail::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #ff9500, #ff7200);
}

.page_exam .exam-detail:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

/* 倒计时样式 */
.page_exam .exam-detail .countdown {
  text-align: center;
  margin: 30px 0;
  padding: 30px;
  background: linear-gradient(135deg, rgba(255, 149, 0, 0.05), rgba(255, 114, 0, 0.08));
  border-radius: 16px;
  position: relative;
}

.page_exam .exam-detail .countdown::before {
  content: '⏱';
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 24px;
  background: #fff;
  padding: 8px;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.page_exam .exam-detail .countdown span {
  display: block;
  font-size: 32px;
  color: #ff9500;
  font-weight: 600;
  letter-spacing: 1px;
  animation: countdownPulse 2s infinite;
  text-shadow: 0 2px 4px rgba(255, 149, 0, 0.2);
}

/* 题目区域样式 */
.page_exam .exam-detail .row {
  display: block;
  margin: 25px 0;
  padding: 35px;
  word-break: break-all;
  border-left: 5px solid #ff9500;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  transition: all 0.3s ease;
  position: relative;
}

.page_exam .exam-detail .row:hover {
  border-left-width: 10px;
  transform: translateX(5px);
}

/* 表单元素样式 */
.page_exam .exam-detail textarea {
  width: 80% !important;
  resize: none;
  border: 2px solid #edf2f7;
  border-radius: 12px;
  padding: 16px;
  font-size: 15px;
  transition: all 0.3s ease;
  background: #fafafa;
}

.page_exam .exam-detail textarea:focus {
  border-color: #ff9500;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(255, 149, 0, 0.15);
  outline: none;
}

/* 单选多选框样式 */
.page_exam .exam-detail label {
  display: flex;
  align-items: center;
  margin: 12px 0;
  padding: 12px 16px;
  border-radius: 8px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.page_exam .exam-detail label:hover {
  background: rgba(255, 149, 0, 0.05);
}

.page_exam .exam-detail input[type=checkbox],
.page_exam .exam-detail input[type=radio] {
  position: relative;
  width: 20px;
  height: 20px;
  margin: 0 12px 0 0;
  accent-color: #ff9500;
  cursor: pointer;
}

/* 按钮样式 */
.page_exam .exam-detail .answer_submit_button {
  margin-top: 40px;
}

.page_exam .exam-detail .answer_submit_button .btn_box {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 30px 0;
}

.page_exam .exam-detail .answer_submit_button .btn_box button {
  width: 180px;
  padding: 16px 32px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.5px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.page_exam .exam-detail .answer_submit_button .btn_box .answer_btn_submit {
  background: linear-gradient(135deg, #ff9500, #ff7200);
  border: none;
  color: #fff;
  box-shadow: 0 4px 15px rgba(255, 149, 0, 0.3);
}

.page_exam .exam-detail .answer_submit_button .btn_box .answer_btn_submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(255, 149, 0, 0.4);
}

.page_exam .exam-detail .answer_submit_button .btn_box .answer_btn_cancel {
  background: #fff;
  border: 2px solid #ff9500;
  color: #ff9500;
}

.page_exam .exam-detail .answer_submit_button .btn_box .answer_btn_cancel:hover {
  background: rgba(255, 149, 0, 0.05);
  transform: translateY(-2px);
}

/* 标题样式 */
.page_exam .exam-detail .title_margin {
  font-size: 20px;
  color: #2c3e50;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid rgba(255, 149, 0, 0.2);
  position: relative;
  font-weight: 600;
}

.page_exam .exam-detail .title_margin::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 60px;
  height: 2px;
  background: #ff9500;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.page_exam .exam-detail .title_margin:hover::after {
  width: 100%;
}

/* 动画效果 */
@keyframes countdownPulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* 响应式优化 */
@media (max-width: 768px) {
  .page_exam .exam-detail {
    padding: 25px;
  }
  
  .page_exam .exam-detail .row {
    padding: 25px;
  }
  
  .page_exam .exam-detail .countdown span {
    font-size: 24px;
  }
  
  .page_exam .exam-detail .answer_submit_button .btn_box {
    flex-direction: column;
  }
  
  .page_exam .exam-detail .answer_submit_button .btn_box button {
    width: 100%;
  }
}

/* 搜索区域样式 */
.page_exam .warp .exam_list_title {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 30px 0;
  padding: 20px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  justify-content: center;
}

/* 搜索框容器 */
.page_exam .warp .exam_list_title .search_box {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 400px;
  padding: 0 0 0 0 !important;
}

/* 搜索标签样式 */
.page_exam .warp .exam_list_title .search_box label {
  font-size: 15px;
  font-weight: 500;
  color: #2c3e50;
  margin-right: 12px;
}

/* 搜索输入框样式 */
.page_exam .warp .exam_list_title .search_box input {
  width: 100%;
  padding: 12px 45px 12px 16px;
  font-size: 14px;
  color: #2c3e50;
  background: #f8f9fa;
  border: 2px solid transparent;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.page_exam .warp .exam_list_title .search_box input:hover {
  background: #fff;
  border-color: rgba(255, 149, 0, 0.3);
}

.page_exam .warp .exam_list_title .search_box input:focus {
  background: #fff;
  border-color: #ff9500;
  box-shadow: 0 0 0 4px rgba(255, 149, 0, 0.15);
  outline: none;
}

/* 搜索按钮样式 */
.page_exam .warp .exam_list_title .search_box .btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ff9500, #ff7200) !important;
  border: none;
  border-radius: 10px;
  color: #fff;
  cursor: pointer;
  transition: all 0.3s ease;
}

.page_exam .warp .exam_list_title .search_box .btn:hover {
  transform: translateY(-50%) scale(1.05);
  box-shadow: 0 4px 12px rgba(255, 149, 0, 0.2);
}

/* 搜索图标样式 */
.page_exam .warp .exam_list_title .search_box .btn i {
  font-size: 18px;
}

/* 搜索框占位符样式 */
.page_exam .warp .exam_list_title .search_box input::placeholder {
  color: #a0aec0;
  font-size: 14px;
}

/* 响应式适配 */
@media (max-width: 768px) {
  .page_exam .warp .exam_list_title {
    flex-direction: column;
    align-items: stretch;
    gap: 15px;
    padding: 15px;
  }

  .page_exam .warp .exam_list_title .search_box {
    max-width: 100%;
  }
  
  .page_exam .warp .exam_list_title .search_box label {
    display: none;
  }
}

/* 添加搜索框动画效果 */
@keyframes searchAppear {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.page_exam .warp .exam_list_title {
  animation: searchAppear 0.3s ease-out;
}

/* 添加搜索按钮点击效果 */
.page_exam .warp .exam_list_title .search_box .btn:active {
  transform: translateY(-50%) scale(0.95);
}

/* 搜索框聚焦时的容器效果 */
.page_exam .warp .exam_list_title .search_box:focus-within {
  transform: translateY(-1px);
}

/* *****************************************************考试结束***************************************************** */



/* *****************************************************公告栏列表页面开始***************************************************** */
/* 公告栏列表页面样式 */
.page_notice {
  padding: 40px 0;
  background: #fafafa;
}

.page_notice .car_notice {
  margin-bottom: 50px;
}

/* 公告列表网格布局 */
.page_notice .notice_list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  /* display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin: 0 50px; */
  counter-reset: item;
}

/* 公告列表标题 */
.page_notice .notice_list .notice_list_title {
  display: block;
  grid-column: span 4;
  padding: 30px 0;
  font-size: 24px;
  font-weight: 600;
  color: #2c3e50;
  text-align: center;
  position: relative;
}

/* 公告块样式 */
.page_notice .notice_list .notice_block {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 25px 25px 25px 75px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(255, 149, 0, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

/* 序号样式 */
.page_notice .notice_list .notice_block::before {
  counter-increment: item;
  content: counter(item);
  position: absolute;
  top: 20px;
  left: 5px;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #ff9500, #ff7200);
  color: #fff !important;
  font-family: 'Arial', sans-serif;
  font-size: 20px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transform: rotate(-15deg);
  box-shadow: 2px 2px 8px rgba(255, 149, 0, 0.2);
  transition: all 0.3s ease;
}

/* 公告标题样式 */
.page_notice .notice_list .notice_block .notice_title {
  padding: 10px 0;
  color: #2c3e50;
  font-size: 18px;
  font-weight: 600;
  transition: all 0.3s ease;
  line-height: 1.4;
}

/* 创建时间样式 */
.page_notice .notice_list .notice_block .notice_create_time {
  padding: 8px 0;
  font-size: 14px;
  color: #94a3b8;
  display: flex;
  align-items: center;
  gap: 8px;
}

.page_notice .notice_list .notice_block .notice_create_time::before {
  content: '📅';
  font-size: 14px;
}

/* 悬浮效果 */
.page_notice .notice_list .notice_block:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(255, 149, 0, 0.15);
  border-color: #ff9500;
}

.page_notice .notice_list .notice_block:hover::before {
  transform: rotate(0deg) scale(1.1);
  box-shadow: 3px 3px 12px rgba(255, 149, 0, 0.3);
}

.page_notice .notice_list .notice_block:hover .notice_title {
  color: #ff9500;
}

/* 公告详情页样式 */
.page_notice.notice-detail .notice_list {
  max-width: 800px;
  margin: 0 auto;
  padding: 30px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.page_notice.notice-detail .notice_list .notice_title {
  text-align: center;
  font-size: 24px;
  font-weight: 600;
  color: #2c3e50;
  padding: 20px 0;
  border-bottom: 2px solid rgba(255, 149, 0, 0.1);
  margin-bottom: 20px;
}

.page_notice.notice-detail .notice_list .notice_creat_time {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  background: linear-gradient(135deg, #ff9500, #ff7200);
  color: #fff;
  font-size: 14px;
  border-radius: 20px;
  margin-bottom: 30px;
}

.page_notice.notice-detail .notice_list .notice_content {
  padding: 30px;
  font-size: 16px;
  line-height: 1.8;
  color: #2c3e50;
  background: #fafafa;
  border-radius: 12px;
  text-indent: 2em;
}

.page_notice.notice-detail .notice_list .notice_content p {
  margin: 16px 0;
  font-size: 16px;
  line-height: 1.8;
}

/* 响应式适配 */
@media (max-width: 1200px) {
  .page_notice .notice_list {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 992px) {
  .page_notice .notice_list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .page_notice .notice_list {
    grid-template-columns: 1fr;
    margin: 0 20px;
  }
}

/* 动画效果 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.page_notice .notice_block {
  animation: fadeInUp 0.5s ease-out;
  animation-fill-mode: both;
}

.page_notice .notice_block:nth-child(2) {
  animation-delay: 0.1s;
}

.page_notice .notice_block:nth-child(3) {
  animation-delay: 0.2s;
}

.page_notice .notice_block:nth-child(4) {
  animation-delay: 0.3s;
}
/* *****************************************************公告栏列表页面结束***************************************************** */



/* *****************************************************商城资讯页面开始***************************************************** */
.page_article {
  padding-bottom: 80px !important;
  background-color: #f9fafb !important;
}

.page_article .card_article {
  padding: 20px 30px !important;
  background-color: #fff !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
  transition: box-shadow 0.3s ease !important;
}


/* 商城资讯页高级优化版 */
.page_article {
  position: relative !important;
  background: linear-gradient(45deg, #fffaf5 0%, #fff3e6 100%) !important;
  overflow: hidden !important;
}

/* 全局动态装饰 */
.page_article::after {
  content: '';
  position: fixed !important;
  top: -20vh !important;
  right: -30vw !important;
  width: 60vw !important;
  height: 60vh !important;
  background: radial-gradient(circle, rgba(255,149,0,0.08) 0%, transparent 60%) !important;
  z-index: 0 !important;
  pointer-events: none !important;
  animation: globalOrbit 20s linear infinite !important;
}

@keyframes globalOrbit {
  0% { transform: rotate(0deg) translateX(20vw) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(20vw) rotate(-360deg); }
}

/* 卡片 */
.page_article .row.art_warp .col-md-3, 
.page_article .row.art_warp .col-lg-3 {
  transform-style: preserve-3d !important;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1) !important;
}


.page_article .card_article_hot .hot_title{
  font-weight: 600 !important;
  color: #000 !important;
}

.page_article .list_hot .hot_title{
  font-weight: 600 !important;
  color: #000 !important;
}

.list_article_hot .item{
  margin-bottom: 2.5rem !important;
}

/* 标题霓虹效果 */
.page_article .article_list_title {
  font-size: 32px !important;
  text-shadow: 0 2px 4px rgba(255,149,0,0.2) !important;
  position: relative !important;
  padding-left: 50px !important;
}

.page_article .article_list_title::before {
  content: '✦' !important;
  position: absolute !important;
  left: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #f1a039!important;
  font-size: 42px !important;
  animation: titleGlow 2s ease-in-out infinite !important;
}

@keyframes titleGlow {
  0%, 100% { opacity: 0.8; text-shadow: 0 0 10px #ff9500; }
  50% { opacity: 1; text-shadow: 0 0 20px #ff9500; }
}

/* 内容区动态边框 */
.page_article .div_article {
  position: relative !important;
  background: #ffffff !important;
  border-radius: 20px !important;
  overflow: hidden !important;
}

.page_article .div_article::before {
  content: '';
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 2px solid transparent !important;
  border-radius: 20px !important;
  animation: borderFlow 4s linear infinite !important;
  pointer-events: none !important;
}

@keyframes borderFlow {
  0% { border-color: #f1a039rgba(255,149,0,0.2) rgba(255,149,0,0.2) rgba(255,149,0,0.2); }
  25% { border-color: rgba(255,149,0,0.2) #f1a039rgba(255,149,0,0.2) rgba(255,149,0,0.2); }
  50% { border-color: rgba(255,149,0,0.2) rgba(255,149,0,0.2) #f1a039rgba(255,149,0,0.2); }
  75% { border-color: rgba(255,149,0,0.2) rgba(255,149,0,0.2) rgba(255,149,0,0.2) #ff9500; }
  100% { border-color: #f1a039rgba(255,149,0,0.2) rgba(255,149,0,0.2) rgba(255,149,0,0.2); }
}


.list_hot{
  color: #fff !important;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 热门文章火焰特效 */
.page_article .list_hot {
  position: relative !important;
  background: linear-gradient(45deg, #fff6ed, #ff7200) !important;
  border: none !important;
}


.page_article .list_hot .hot_title {
  font-size: 24px !important;
  position: relative !important;
  padding-bottom: 15px !important;
  font-weight: 600 !important;
}


/* 列表项火焰动效 */
.page_article .list_hot .item:before {
  background: linear-gradient(45deg, #ff9500, #ff7200) !important;
  box-shadow: 0 0 12px rgba(255,149,0,0.3) !important;
  transition: all 0.3s ease !important;
}

.page_article .list_hot .item:hover:before {
  transform: translateY(-50%) scale(1.5) !important;
  animation: flamePulse 0.6s infinite alternate !important;
}

@keyframes flamePulse {
  from { transform: translateY(-50%) scale(1.2); }
  to { transform: translateY(-50%) scale(1.5); }
}

/* 评论区对话气泡 */
.page_article .comments-wrap .container .row {
  background: linear-gradient(145deg, #ffffff, #fff8f2) !important;
  border: 2px solid #ffeedd !important;
  position: relative !important;
}

.page_article .comments-wrap .bar_title a::before {
  content: '💭' !important;
  animation: commentFloat 3s ease-in-out infinite !important;
}

@keyframes commentFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

/* 互动按钮光效升级 */
.page_article .btns_interact .btn {
  background: #ff7200 !important;
  box-shadow: 0 4px 12px rgba(255,149,0,0.2) !important;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
}

.page_article .btns_interact .btn:hover {
  transform: scale(1.2) rotate(8deg) !important;
  box-shadow: 0 6px 20px rgba(255,149,0,0.3) !important;
}


/* 时间标签流光效果 */
.page_article .aside .time {
  font-weight: 600 !important;
  padding: 6px 15px !important;
  border-radius: 20px !important;
  background: linear-gradient(45deg, #fff3e6, #ffffff) !important;
  box-shadow: 0 2px 8px rgba(255,149,0,0.1) !important;
}

.page_article .aside .time::before {
  content: '⏳' !important;
  animation: sandFlow 2s linear infinite !important;
}

@keyframes sandFlow {
  0% { transform: translateY(-50%) rotate(0deg); }
  100% { transform: translateY(-50%) rotate(180deg); }
}

/* 图片悬浮全息效果 */
.page_article .media .icon img {
  position: relative !important;
  transition: all 0.4s ease !important;
  filter: drop-shadow(0 4px 12px rgba(255,149,0,0.2)) !important;
}

.page_article .media .icon:hover img {
  transform: perspective(1000px) rotateX(3deg) rotateY(-3deg) translateZ(20px) !important;
  filter: drop-shadow(0 8px 24px rgba(255,149,0,0.3)) !important;
}

.card_article_hot{
  color: white;
  background-color: #f1a039!important;
  margin: 0.5rem;
  border-radius: 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* *****************************************************商城资讯页面结束***************************************************** */



/* *****************************************************留言反馈页面开始***************************************************** */
/* 页面基础样式 - 增加纹理背景 */
.page_message {
  padding: 60px 0;
  background: 
    linear-gradient(135deg, rgba(255,149,0,0.03) 25%, transparent 25%),
    linear-gradient(225deg, rgba(255,114,0,0.03) 25%, transparent 25%),
    #f8fafc;
  background-size: 60px 60px;
}

/* 页面标题 - 增加动态效果 */
.page_message .page_title {
  font-size: 38px;
  letter-spacing: -0.5px;
  padding-bottom: 20px;
  margin-bottom: 50px;
  display: inline-block;
  background: linear-gradient(90deg, #f1a03930%, #ff7200) text;
  -webkit-text-fill-color: transparent;
}

.page_message .page_title::after {
  width: 120px;
  height: 6px;
  bottom: -15px;
  background: linear-gradient(90deg, #ff9500, #ff7200);
  box-shadow: 0 4px 12px rgba(255,149,0,0.2);
  transition: width 0.3s ease;
}

.page_message .page_title:hover::after {
  width: 150px;
}

/* 留言卡片容器 - 统一视觉比例 */
.page_message .card_message {
  margin: 0 30px 40px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 
    0 12px 24px -6px rgba(255,149,0,0.1),
    0 0 1px 1px rgba(255,149,0,0.05);
  transition: transform 0.3s ease;
}

/* 留言项样式 - 统一高度和间距 */
.page_message .card_message .list_message .item_message {
  padding: 30px;
  margin: 20px;
  border: 2px solid rgba(255,149,0,0.08);
  min-height: 180px;
  background: 
    linear-gradient(145deg, #fff 50%, rgba(255,149,0,0.03));
}

/* 用户信息块 - 增加品牌标识 */
.page_message .card_message .list_message .item_message .left_block {
  padding: 18px 24px;
  background: 
    linear-gradient(135deg, 
      rgba(255,149,0,0.08) 0%, 
      rgba(255,114,0,0.12) 100%);
  position: relative;
  overflow: hidden;
}

.left_block::before {
  content: "✦";
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255,149,0,0.3);
  font-size: 24px;
}

/* 用户头像样式 - 3D效果 */
.page_message .card_message .list_message .item_message .left_block img {
  width: 70px;
  height: 70px;
  border: 3px solid #fff;
  box-shadow: 
    0 6px 20px rgba(255,149,0,0.15),
    inset 0 0 8px rgba(255,149,0,0.1);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 留言内容区域 - 增加引用符号 */
.page_message .card_message .list_message .item_message .messg_box {
  position: relative;
  padding: 10px;
}

.message_content::before {
  content: "“";
  position: absolute;
  left: -25px;
  top: -15px;
  font-size: 48px;
  color: rgba(255,149,0,0.2);
  font-family: Georgia, serif;
}

/* 时间样式 - 优化显示效果 */
.page_message .card_message .list_message .item_message .bottom .time {
  font-size: 13px;
  color: #64748b;
  padding: 8px 12px;
  background: rgba(255,149,0,0.03);
  border-radius: 8px;
  display: inline-flex;
}

/* 表单样式 - 增强视觉层次 */
.page_message .form_message {
  margin: 40px 30px !important;
  padding: 40px !important;
  border: 2px solid rgba(255,149,0,0.1);
  background: 
    linear-gradient(145deg, #fff 50%, rgba(255,149,0,0.03));
}

/* 输入框聚焦效果 - 增加动态渐变 */
.page_message .form_message .form-group:focus-within label {
  color: #ff7200;
  padding-left: 5px;
}

.page_message .form_message .form-group input:focus,
.page_message .form_message .form-group textarea:focus {
  box-shadow: 
    0 0 0 4px rgba(255,149,0,0.1),
    inset 0 -40px 30px rgba(255,149,0,0.02);
}

/* 按钮样式 - 增加按压反馈 */
.page_message .form_message .btns_bottom .btn_item {
  position: relative;
  overflow: hidden;
  z-index: 1;
}


.btn_item:hover::after {
  left: 100%;
}

/* 悬浮效果优化 */
.page_message .card_message .list_message .item_message:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(255,149,0,0.3) !important;
  background: 
    linear-gradient(145deg, #fff 50%, rgba(255,149,0,0.05));
}

/* 动画效果增强 */
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px) rotateX(-15deg) !important;
  }
  to {
    opacity: 1;
    transform: translateY(0) rotateX(0) !important;
  }     
}

/* 新增元素装饰 */
.card_message::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(135deg, 
    rgba(255,149,0,0) 40%, 
    rgba(255,149,0,0.1) 50%, 
    rgba(255,149,0,0) 60%);
  z-index: -1;
  animation: gradientFlow 8s infinite linear;
}

@keyframes gradientFlow {
  0% { background-position: 0% 50% }
  50% { background-position: 100% 50% }
  100% { background-position: 0% 50% }
}
/* *******************************************留言反馈页面结束***************************************************** */



/* *******************************************自定义模块列表开始***************************************************** */
.diy_list .diy_list_box_wrap, .diy_list .goods {
  position: relative;
  padding: 0;
  justify-content: flex-start !important;
  width: auto !important;
  padding: 0 0 0 !important;
  min-height: 360px !important;
  margin: 0 !important;
  border: 1px solid #e7e7e7;
  overflow: hidden;
  z-index: 999;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background-color: #fff;
  border-radius: 10px !important;
}

.diy_list .diy_list_box_wrap:hover, .diy_list .goods:hover {
  transform: translateY(-10px) scale(1.02) !important;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;
  border-color: #f1a039!important;
}

.diy_list .diy_list_box_wrap .diy_list_img_box, .diy_list .goods .diy_list_img_box {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background-color: #f8f8f8;
  position: relative;
}

.diy_list .diy_list_box_wrap .diy_list_img_box::before, .diy_list .goods .diy_list_img_box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 149, 0, 0.1);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.diy_list .diy_list_box_wrap .diy_list_img_box:hover::before, .diy_list .goods .diy_list_img_box:hover::before {
  opacity: 1;
}

.diy_list .diy_list_box_wrap .diy_list_img_box .diy_row, .diy_list .goods .diy_list_img_box .diy_row {
  width: 100%;
  height: 100%;
  margin-bottom: 0px !important;
}

.diy_list .diy_list_box_wrap .diy_list_img_box .diy_row .diy_img, .diy_list .goods .diy_list_img_box .diy_row .diy_img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.diy_list .diy_list_box_wrap .diy_list_img_box .diy_row .diy_img img, .diy_list .goods .diy_list_img_box .diy_row .diy_img img {
  border-radius: 0px;
  transition: transform 0.3s ease;
}

.diy_list .diy_list_box_wrap .diy_list_img_box .diy_row .diy_img img:hover, .diy_list .goods .diy_list_img_box .diy_row .diy_img img:hover {
  transform: scale(1.1) !important;
}

.diy_list .diy_list_box_wrap .diy_list_img_box .diy_list_img_title, .diy_list .goods .diy_list_img_box .diy_list_img_title {
  display: none;
}

.diy_list .diy_list_box_wrap .diy_list_item_box, .diy_list .goods .diy_list_item_box {
  position: absolute;
  width: 100%;
  bottom: 0px;
  flex: 1;
  min-width: 0;
  padding: 30px 0 10px;
  visibility: visible;
  opacity: 1;
  transition: opacity 0.4s ease 0s;
  background-color: rgba(255, 149, 0, 0.9) !important;
  color: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important;
}


.diy_list .diy_list_box_wrap .diy_list_item_box:first-child, .diy_list .goods .diy_list_item_box:first-child {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 1;
  visibility: visible;
  transition: none;
}

.diy_list .diy_list_box_wrap .diy_list_item_content, .diy_list .goods .diy_list_item_content {
  position: relative;
  width: auto;
  padding: 0 15px 0 20px;
  margin-bottom: 5px;
}

.diy_list .diy_list_box_wrap .diy_list_item_content:nth-child(1), .diy_list .goods .diy_list_item_content:nth-child(1) {
  margin: 0 !important;
  border: 0 none;
}

.diy_list .diy_list_box_wrap .diy_list_item_content:nth-child(1) .diy_field, .diy_list .diy_list_box_wrap .diy_list_item_content:nth-child(1) .diy_text, .diy_list .goods .diy_list_item_content:nth-child(1) .diy_field, .diy_list .goods .diy_list_item_content:nth-child(1) .diy_text {
  position: relative;
  text-align: left;
  width: auto !important;
  height: 24px;
  line-height: 24px;
}

.diy_list .diy_list_box_wrap .diy_list_item_content .diy_row, .diy_list .goods .diy_list_item_content .diy_row {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  margin-bottom: 16px;
  margin-left: 15px;
}

.diy_list .diy_list_box_wrap .diy_list_item_content .diy_row .diy_title, .diy_list .goods .diy_list_item_content .diy_row .diy_title {
  margin-right: 5px;
  color: #fff;
}

.diy_list .diy_list_box_wrap .diy_list_item_content .diy_row .diy_title span:before, .diy_list .goods .diy_list_item_content .diy_row .diy_title span:before {
  content: "";
  position: absolute;
  top: 8px;
  left: 10px;
  display: inline-block;
  vertical-align: top;
  width: 5px;
  height: 5px;
  border: 1px solid #fff;
  border-radius: 50%;
  overflow: hidden;
}

.diy_list .diy_list_box_wrap .diy_list_item_content .diy_row .diy_text, .diy_list .goods .diy_list_item_content .diy_row .diy_text {
  flex: 1;
  color: #fff;
}

.diy_list .diy_list_box_wrap .diy_list_item_content:before, .diy_list .goods .diy_list_item_content:before {
  content: "";
  position: absolute;
  left: 12px;
  top: 12px;
  bottom: -24px;
  border-right: 5px solid #fff;
  border-radius: 20px;
}

.diy_list .diy_list_box_wrap .diy_list_item_content:last-child::before, .diy_list .goods .diy_list_item_content:last-child::before {
  display: none;
}

.diy_list .diy_list_container {
  margin-bottom: 80px;
}

.diy_list .diy_list_container .diy_list_title {
  padding: 60px 0 50px;
  text-align: center;
  font-size: 2rem;
  color: #ff9500;
  position: relative;
}

.diy_list .diy_list_container .diy_list_title::after {
  content: "";
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background-color: #ff9500;
  border-radius: 2px;
}

.diy_list .diy_list_container .diy_list_search {
  min-width: 0;
  margin: 0;
  margin-right: 10px;
  font-size: 14px;
}

.diy_list .diy_list_container .diy_list_search .view {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.diy_list .diy_list_container .diy_list_search .view .diy_list_search_title {
  display: none;
  width: 100px;
  text-align: right;
  font-size: 14px;
  height: 38px;
  line-height: 38px;
}

.diy_list .diy_list_container .diy_list_search .view.Search input {
  margin-right: 10px !important;
  border-radius: 4px;
}

.diy_list .diy_list_container .diy_list_search .view.Search .btn {
  position: relative;
  top: 50%;
  transform: translateY(0%);
  left: auto;
  right: auto;
  bottom: auto;
  width: 48px !important;
  height: 48px !important;
  border-radius: 4px;
  background: #f1a039!important;
  color: #fff;
  transition: background-color 0.3s ease;
}

.diy_list .diy_list_container .diy_list_search .view.Search .btn:hover {
  background-color: #e08a00 !important;
}

.diy_list .diy_list_container .diy_list_select_box {
  display: flex;
  flex-direction: row;
}

.diy_list .diy_list_container .diy_list_select_box .diy_list_select_title {
  display: none;
  position: relative;
  width: 100px;
  text-align: center;
  font-size: 14px;
  height: 38px;
  line-height: 38px;
}

.diy_list .diy_list_container .diy_list_select_box .diy_list_dropdown_box .view {
  display: flex;
  flex-direction: row;
}

.diy_list .diy_list_container .diy_list_select_box .diy_list_dropdown_box .view .dropdown + .dropdown {
  margin-left: 10px;
}

.diy_list .diy_list_container .diy_list_box {
  margin: 0 0 50px 0;
}

.diy_list .diy_list_container .diy_list_box .tabs .nav-tabs {
  justify-content: center;
}

.diy_list .diy_list_container .diy_list_box .tabs .nav-tabs .nav-item {
  margin-right: 8px;
}

.diy_list .diy_list_container .diy_list_box .tabs .nav-tabs .nav-item .nav-link {
  margin: 0;
  border: none;
  border-bottom: 2px solid transparent;
  transition: border-color 0.3s ease;
}

.diy_list .diy_list_container .diy_list_box .tabs .nav-tabs .nav-item .active {
  margin: 0;
  border: none;
  color: #f1a039!important;
  border-bottom: 2px solid #ff9500;
  font-weight: 600;
}

.diy_list .diy_list_container .diy_list_box .tabs .tab-content .tab-pane {
  padding: 0 30px;
}

.diy_list .diy_list_container .diy_list_box .diy_view_list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 20px;
}

.diy_list .diy_list_container .diy_list_box .diy_view_list .diy_list_box_wrap {
  min-height: 230px !important;
}

.diy_list .diy_list_container .diy_list_box .diy_view_list .diy_list_box_wrap .diy_list_img_box {
  height: 430px;
}

.diy_list .diy_list_container .diy_list_box .diy_view_list .diy_list_box_wrap .diy_list_item_box .diy_row .diy_title {
  width: 110px;
}

.diy_list .diy_list_container .diy_list_box .diy_view_list .diy_list_box_wrap .diy_list_item_box .diy_row .diy_text {
  display: inline-block;
}

.diy_list .diy_list_container .diy_pager .container .row {
  margin: 0;
  display: block;
  text-align: center;
}

.diy_list .diy_list_container .diy_pager .container .row .diy_pager_item {
  display: inline-block;
  flex: 0;
  width: 200px !important;
}

.diy_list .diy_list_container .diy_pager .container .row .diy_pager_item .info, .diy_list .diy_list_container .diy_pager .container .row .diy_pager_item .select {
  position: relative;
  top: -15px;
}

.diy_list .diy_list_page_box {
  margin: 30px 0;
  padding-top: 30px;
}

.diy_list .diy_list_page_box .row {
  display: flex;
  align-items: center;
  overflow: hidden;
}

.diy_list .diy_list_page_box .row div {
  height: 40px;
  line-height: 34px;
  flex: 0.09 !important;
}

.diy_list .diy_list_page_box .row div .page-item.active .page-link {
  background: #f1a039!important;
  border-color: #f1a039!important;
  color: #fff !important;
}

.diy_list .diy_list_page_box .overflow-auto {
  top: 0;
  margin-bottom: 0;
}

.diy_list .diy_list_page_box .pagination {
  margin-bottom: 0;
}

#app .diy_edit .warp > .container {
  position: relative;
  box-sizing: border-box;
  margin: 10px 50px 80px;
  background: #fff !important;
  border-radius: 4px;
}

#app .diy_edit .row {
  margin: 0;
}

#app .diy_edit > .row {
  display: flex;
  justify-content: flex-start;
}

#app .diy_edit .diy_edit_content_box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 20px;
}

#app .diy_edit .form-item {
  width: auto !important;
  max-width: none !important;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  font-size: 14px;
}

#app .diy_edit .form-item .diy_title {
  width: 125px;
  padding-right: 10px;
  font-size: 14px;
  line-height: 32px;
  color: #5e6671;
  text-align: right;
}

#app .diy_edit .form-item input, #app .diy_edit .form-item select, #app .diy_edit .form-item textarea {
  margin-top: 0;
  font-size: 14px;
  border-radius: 0;
  box-shadow: none;
}

#app .diy_edit .form-item input::-moz-placeholder, #app .diy_edit .form-item select::-moz-placeholder, #app .diy_edit .form-item textarea::-moz-placeholder {
  font-size: 14px !important;
}

#app .diy_edit .form-item input::placeholder, #app .diy_edit .form-item select::placeholder, #app .diy_edit .form-item textarea::placeholder {
  font-size: 14px !important;
}

#app .diy_edit .form-item .diy_text input {
  height: 32px;
  line-height: 32px;
}

#app .diy_edit .form-item .diy_img .btn_add_img {
  width: 100px;
  height: 100px;
  /* margin-left: 10px; */
  line-height: 100px;
  border: 1px solid #ff9500;
  color: #ff9500;
  cursor: pointer;
  font-size: 25px;
  text-align: center;
  transition: background-color 0.3s ease, color 0.3s ease;
}

#app .diy_edit .form-item .diy_img .btn_add_img:hover {
  background-color: #f1a039!important;
  color: #fff !important;
}

#app .diy_edit .form-item .diy_img img {
  width: 120px;
  height: 120px;
  cursor: pointer;
}

#app .diy_edit .form-item .diy_img label {
  padding: 6px;
  margin: 0;
}

#app .diy_edit .form-item .diy_down select {
  width: 100px;
  height: 32px;
  line-height: 32px;
  font-size: 14px;
}

#app .diy_edit .form-item .diy_desc textarea {
  width: 100%;
  height: 300px;
}

#app .diy_edit .form-item .diy_select {
  width: 80px;
  height: 30px;
  line-height: 30px;
  font-size: 14px;
}

#app .diy_edit .form-item .diy_select option {
  width: 80px;
  height: 30px;
  line-height: 30px;
  font-size: 14px;
}

#app .diy_edit .diy_edit_submit_box {
  position: relative;
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

#app .diy_edit .diy_edit_submit_box .btn_box {
  display: flex;
  justify-content: center;
}

#app .diy_edit .diy_edit_submit_box .btn_box .btn_submit {
  height: 48px;
  line-height: 18px;
  background-color: #ff9500;
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 0 20px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#app .diy_edit .diy_edit_submit_box .btn_box .btn_submit:hover {
  background-color: #e08a00 !important;
}

#app .diy_details {
  padding-bottom: 110px;
}

#app .diy_details .row {
  padding: 0;
  margin: 0;
}

#app .diy_details .container {
  padding: 0;
}

#app .diy_details .warp {
  padding-top: 10px;
}

#app .diy_details .diy_details_box {
  border-radius: 4px;
  box-shadow: none;
}

#app .diy_details .diy_details_box .details_title {
  display: block !important;
  width: 100px;
  margin: 20px auto 0;
  text-align: center;
  font-size: 1.5rem;
  color: #ff9500;
}

#app .diy_details .diy_details_box .row_top_wrap {
  display: flex;
  flex-direction: column;
  min-height: 225px;
  width: 100%;
  justify-content: flex-start;
  align-items: center;
}

#app .diy_details .diy_details_box .row_top_wrap .row_1 {
  width: auto;
  display: flex;
  flex-direction: column;
  margin: 30px 0 20px;
}

#app .diy_details .diy_details_box .row_top_wrap .row_1 .diy_img {
  width: 440px;
  height: 280px;
  margin: 0;
  border-radius: 4px;
}

#app .diy_details .diy_details_box .row_top_wrap .row_1 .diy_img img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 4px;
}

#app .diy_details .diy_details_box .row_top_wrap .row_2 {
  flex: 1;
  min-width: 0;
  display: block;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 50%;
  margin: 30px 20px;
  border: 1px solid #e4eaef;
}

#app .diy_details .diy_details_box .row_top_wrap .row_2 .row_cont, #app .diy_details .diy_details_box .row_top_wrap .row_2 > .view {
  display: block;
  border: 0 none;
  width: auto;
  padding: 10px;
}

#app .diy_details .diy_details_box .row_top_wrap .row_2 .row_cont:not(:nth-child(-n+2)), #app .diy_details .diy_details_box .row_top_wrap .row_2 > .view:not(:nth-child(-n+2)) {
  border-top: 1px solid #e4eaef;
}

#app .diy_details .diy_details_box .row_top_wrap .row_2 .row_cont:not(:nth-child(2n)), #app .diy_details .diy_details_box .row_top_wrap .row_2 > .view:not(:nth-child(2n)) {
  border-right: 1px solid #e4eaef;
  background: #fff;
  height: 100%;
}

#app .diy_details .diy_details_box .row_top_wrap .row_2 .row_cont:nth-child(2n), #app .diy_details .diy_details_box .row_top_wrap .row_2 > .view:nth-child(2n) {
  background-color: #fff;
  height: 100%;
}

#app .diy_details .diy_details_box .row_top_wrap .row_2 .view {
  display: flex;
}

#app .diy_details .diy_details_box .row_top_wrap .row_2 .view .diy_title {
  min-width: 100px;
  text-align: right;
  font-size: 16px;
  line-height: 32px;
  color: #5e6671;
}

#app .diy_details .diy_details_box .row_top_wrap .row_2 .view .diy_field {
  margin-left: 15px;
  font-size: 16px;
  max-width: 285px;
  margin-right: 10px;
  line-height: 32px;
  color: #1a2535;
}

#app .diy_details .diy_details_box .row_top_wrap .row_2 .view a {
  color: #0d6efd !important;
}

#app .diy_details .diy_details_box .praise_wrap {
  width: 100%;
  text-align: right;
  padding: 10px;
}

#app .diy_details .diy_details_box .praise_wrap .diy_title {
  color: #333;
}

#app .diy_details .diy_details_box .praise_wrap .diy_text {
  color: #ff9500;
}

#app .diy_details .diy_details_box .details_btn_wrap {
  order: 3;
  width: 100%;
  padding: 40px;
  text-align: center;
}

#app .diy_details .diy_details_box .details_btn {
  margin-left: 20px;
  min-width: 150px !important;
  height: 48px;
  line-height: 20px;
  text-align: center;
  color: #fff !important;
  background: #f1a039!important;
  border-color: #f1a039!important;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

#app .diy_details .diy_details_box .details_btn:hover {
  background-color: #e08a00 !important;
  border-color: #e08a00 !important;
}

#app .diy_details .diy_details_box .rich_text {
  position: relative;
  display: block;
  width: 100%;
  margin-top: 20px;
  background: #fafafa;
  border-bottom: 1px solid #e4eaef;
}

#app .diy_details .diy_details_box .rich_text .diy_html {
  padding: 30px 64px;
}

#app .diy_details .diy_details_box .rich_text .diy_html h1, #app .diy_details .diy_details_box .rich_text .diy_html h2, #app .diy_details .diy_details_box .rich_text .diy_html h3 {
  font-size: 18px !important;
  color: #1a2535 !important;
  font-weight: bold !important;
  margin-bottom: 15px !important;
}

#app .diy_details .diy_details_box .rich_text .diy_html p, #app .diy_details .diy_details_box .rich_text .diy_html div, #app .diy_details .diy_details_box .rich_text .diy_html a, #app .diy_details .diy_details_box .rich_text .diy_html span {
  font-size: 16px !important;
  color: #666 !important;
}

#app .diy_details .diy_details_box .rich_text .diy_html img {
  max-width: 100% !important;
}

#app .diy_details .diy_details_box .row {
  justify-content: flex-start;
}

#app .diy_details .diy_details_box .row .row_cont {
  width: 50%;
  border: 1px dashed #eee;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 15px;
}

#app .diy_details .diy_details_box .flex_row2 {
  display: flex;
  flex-wrap: wrap;
}

#app .diy_details .diy_details_box .flex_row2_item_text {
  max-width: 600px !important;
}

#app .diy_details .time_type {
  position: absolute;
  top: -10px;
  right: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px 10px;
  color: #fff;
  background-color: #ff9500;
}

#app .diy_details .time_type > span {
  display: none;
}

#app .diy_details .btn_share {
  position: absolute;
  top: 50%;
  right: 0;
  display: flex;
  flex-direction: row-reverse;
}

#app .diy_details .btn_share + img {
  position: absolute;
  top: calc(50% + 50px);
  right: 0;
}

#app .diy_details .qecode {
  position: absolute;
  left: auto;
  right: 40px;
  top: calc(50% + 50px);
}

#app .diy_details .location_address {
  padding: 10px;
  background-color: #fff;
}

#app .diy_details .review {
  background-color: #fff;
  border-radius: 4px;
}

#app .diy_details .review .bar_title, #app .diy_details .review .mt {
  padding: 15px;
  font-size: 18px;
  font-weight: bold;
  border-bottom: 1px solid #e4eaef;
}

#app .diy_details .review .bar_title .title::after, #app .diy_details .review .mt .title::after {
  content: " / Comment";
}

#app .diy_details .pagination {
  justify-content: center;
  padding-top: 25px;
  border-top: 1px solid #ccc;
}

#app .diy_details .comment_box {
  border-bottom: 2px dashed #e4eaef;
  padding-bottom: 30px;
}

#app .diy_details .comment_box .list_comment {
  padding: 15px;
}

#app .diy_details .answer_title {
  font-size: 16px;
  color: #1a2535;
}

#app .diy_details .reset_answer_personnel {
  width: 120px;
  height: 40px;
  text-align: center;
  background: #ff9500;
  border-color: #f1a039!important;
  color: #fff !important;
  font-size: 14px;
  position: relative;
  top: -5px;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

#app .diy_details .reset_answer_personnel:hover {
  background: #e08a00;
  border-color: #e08a00 !important;
}

#app .diy_details .form_editor, #app .diy_details .form_editor_box {
  background-color: #fff;
  border-radius: 4px;
}

#app .diy_details .form_editor .details_form_editor_title, #app .diy_details .form_editor_box .details_form_editor_title {
  display: none;
}

#app .diy_details .form_editor .form_editor, #app .diy_details .form_editor .fn, #app .diy_details .form_editor_box .form_editor, #app .diy_details .form_editor_box .fn {
  padding: 15px;
  margin-top: 0;
}

#app .diy_details .form_editor .form_editor .editor:before, #app .diy_details .form_editor .fn .editor:before, #app .diy_details .form_editor_box .form_editor .editor:before, #app .diy_details .form_editor_box .fn .editor:before {
  font-size: 18px;
  font-weight: bold;
}

#app .diy_details .fn .btn_publish {
  margin: 110px 0 30px;
  text-align: center;
}

#app .diy_details .fn .btn_publish .btn {
  width: 150px;
  display: inline-block;
  background: #f1a039!important;
  border-color: #f1a039!important;
  color: #fff !important;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

#app .diy_details .fn .btn_publish .btn:hover {
  background: #e08a00 !important;
  border-color: #e08a00 !important;
}

.diy_list .overflow-auto {
  margin-bottom: 100px;
}

.diy_list .diy_list .ins_s {
  display: none;
}

.y_music_player {
  position: relative !important;
  height: auto !important;
  padding-left: 50px !important;
  padding-bottom: 50px !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(245, 245, 245, 0.95)) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
  transition: all 0.3s ease !important;
}

.y_music_player:hover {
  box-shadow: 0 6px 25px rgba(255, 149, 0, 0.1) !important;
}

.y_music_player .play_control {
  position: absolute !important;
  bottom: 0 !important;
  left: 10px !important;
  height: 60px !important;
  transition: transform 0.3s ease !important;
}

.y_music_player .play_control:hover {
  transform: scale(1.05) !important;
}

.y_music_player .play_control .el-image {
  position: absolute !important;
  top: -42px !important;
  left: -13px !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
  transition: all 0.3s ease !important;
}

.y_music_player .play_control .el-image:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 15px rgba(255, 149, 0, 0.15) !important;
}

.y_music_player .play-volume {
  position: absolute !important;
  bottom: 17px !important;
  left: 109px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 5px 10px !important;
  background: rgba(255, 149, 0, 0.1) !important;
  border-radius: 20px !important;
  transition: all 0.3s ease !important;
}

.y_music_player .play-volume:hover {
  background: rgba(255, 149, 0, 0.15) !important;
}

/* 添加音量控制样式 */
.y_music_player .play-volume input[type="range"] {
  -webkit-appearance: none !important;
  height: 4px !important;
  background: rgba(255, 149, 0, 0.2) !important;
  border-radius: 2px !important;
}

.y_music_player .play-volume input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none !important;
  width: 12px !important;
  height: 12px !important;
  background: #f1a039!important;
  border-radius: 50% !important;
  cursor: pointer !important;
}

.el-slider__bar{
  background-color: #f1a039!important;
}

.el-slider__button{
  border: 2px solid #f1a039!important;
}

.el-date-table td.today span{
  color: #f1a039!important;
}

.el-date-table td.available:hover{
  color: #f1a039!important;
}

tbody tr:hover{
  background-color: rgba(255, 149, 0, 0.2) !important;
}

.el-picker-panel__icon-btn:hover{
  color: #f1a039!important;
}

.el-range-editor.is-active, .el-range-editor.is-active:hover, .el-select .el-input.is-focus .el-input__inner{
  border-color: #f1a039!important;
}
/* *****************************************************自定义模块列表结束***************************************************** */



/******************************************************自定义编辑开始***************************************************** */
#app .page_feedback .warp .container::before {
  content: "内容编辑";
  font-size: 20px;
  position: absolute;
  top: 22px;
  left: 680px;
  font-weight: 600;
}

#app .page_i_want_to_customize .warp .container > .row .selected_seat_box {
  margin-left: 138px;
  margin-top: 14px;
}

#app .page_i_want_to_customize .warp .container > .row .selected_seat_box::before {
  content: "选定座位:";
  display: block;
  position: absolute;
  top: -16px;
  left: -70px;
  width: 180%;
  font-size: 15px;
  color: #555;
}
/* *****************************************************自定义编辑结束***************************************************** */



/* *****************************************************快讯详情页面开始***************************************************** */
/* *********************************快讯详情页面结束***************************************************** */

/* 商品详情页主容器 */
.page_goods.goods_det .card_div_goods {
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 20px 40px rgba(255,149,0,0.08);
  padding: 40px;
}

/* 商品展示区整体布局 */
.page_goods.goods_det .card_div_goods .gods {
  display: grid;
  grid-template-columns: 100px 1fr 1.2fr;
  gap: 30px;
  align-items: start;
}

/* 左侧缩略图列表 */
.page_goods.goods_det .card_div_goods .gods .col-12:first-child {
  width: 100px !important;
}

.page_goods.goods_det .card_div_goods .list_sm_img {
  display: flex;
  flex-direction: column;
  gap: 15px;
  position: sticky;
  top: 0px !important;
} 

.page_goods.goods_det .card_div_goods .list_sm_img .item {
  width: 100px;
  height: 100px;
}

.page_goods.goods_det .card_div_goods .list_sm_img .item .sm_figure {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  border: 2px solid rgba(255,149,0,0.1) !important;
  overflow: hidden;
  transition: all 0.3s ease;
}

/* 中间主图区域 */
.page_goods.goods_det .card_div_goods .gods .col-12:nth-child(2) {
  max-width: none;
}

.page_goods.goods_det .card_div_goods .card_goods_info .figure {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 15px 30px rgba(255,149,0,0.1);
  transition: all 0.3s ease;
}

/* 右侧商品信息区域 */
.page_goods.goods_det .card_div_goods .card_goods_info {
  display: flex !important;
  /* flex-direction: column !important; */
  flex-direction: row !important;
  gap: 25px;
  padding: 15px;
  align-items: center;
}

/* 商品标题 */
.page_goods.goods_det .card_div_goods .card_goods_info .titile_t {
  margin-bottom: 0;
}

.page_goods.goods_det .card_div_goods .card_goods_info .titile_t .goods_name {
  font-size: 32px;
  font-weight: 800;
  color: #1a2535;
  line-height: 1.3;
  margin-bottom: 15px;
  position: relative;
  padding-bottom: 15px;
}

.page_goods.goods_det .card_div_goods .card_goods_info .titile_t .goods_name::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 80px;
  height: 4px;
  background: linear-gradient(90deg, #ff9500, #ff7200);
  border-radius: 2px;
}

/* 价格区块 */
.page_goods.goods_det .card_div_goods .card_goods_info .price_b {
  padding: 25px;
  background: rgba(255,149,0,0.03);
  border-radius: 16px;
  border: 1px solid rgba(255,149,0,0.1);
}

.page_goods.goods_det .card_div_goods .card_goods_info .price_b .price_block .price {
  display: inline-block;
  background: linear-gradient(135deg, #ff9500, #ff7200);
  padding: 12px 25px;
  border-radius: 12px;
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  box-shadow: 0 8px 20px rgba(255,149,0,0.2);
}

/* 购买按钮组 */
.page_goods.goods_det .card_div_goods .card_goods_info .price_b .bottom_handle {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 25px;
}

.page_goods.goods_det .card_div_goods .card_goods_info .price_b .bottom_handle .buy {
  grid-column: span 2;
  height: 50px !important;
  line-height: 50px !important;
  background: linear-gradient(135deg, #ff9500, #ff7200) !important;
  border-radius: 12px !important;
  color: #fff !important;
  font-weight: 600 !important;
  text-align: center;
  transition: all 0.3s ease;
  margin-left: 10px !important;
}

/* 悬浮效果 */
.page_goods.goods_det .card_div_goods .list_sm_img .item .sm_figure:hover {
  border-color: #f1a039!important;
  transform: translateX(5px);
  box-shadow: 0 5px 15px rgba(255,149,0,0.15);
}

.page_goods.goods_det .card_div_goods .card_goods_info .figure:hover {
  transform: scale(1.02);
}

/* 响应式布局 */
@media (max-width: 1400px) {
  .page_goods.goods_det .card_div_goods .gods {
    grid-template-columns: 100px 1fr;
  }
  
  .page_goods.goods_det .card_div_goods .card_goods_info {
    grid-column: 1 / -1;
    margin-top: 30px;
  }
}

@media (max-width: 768px) {
  .page_goods.goods_det .card_div_goods .gods {
    grid-template-columns: 1fr;
  }

  .page_goods.goods_det .card_div_goods .list_sm_img {
    flex-direction: row;
    width: 100%;
    overflow-x: auto;
    padding: 10px 0;
  }

  .page_goods.goods_det .card_div_goods .list_sm_img .item {
    flex-shrink: 0;
  }
}

/* 滚动条美化 */
.page_goods.goods_det .card_div_goods .list_sm_img::-webkit-scrollbar {
  height: 4px;
}

.page_goods.goods_det .card_div_goods .list_sm_img::-webkit-scrollbar-thumb {
  background: rgba(255,149,0,0.3);
  border-radius: 4px;
}

/* 价格区块 */
.page_goods.goods_det .card_div_goods .card_goods_info .price_b {
  order: 2;
  display: flex;
  flex-direction: column;
  /* margin-bottom: 20px; */
  padding: 25px;
  background: rgba(255,149,0,0.03);
  border-radius: 16px;
  border: 1px solid rgba(255,149,0,0.1);
}

.page_goods.goods_det .card_div_goods .card_goods_info .price_b .price_block {
  flex: 1;
  min-height: 0;
}

.page_goods.goods_det .card_div_goods .card_goods_info .price_b .price_block .price_item {
  display: flex;
  align-items: center;
  gap: 15px;
}

.page_goods.goods_det .card_div_goods .card_goods_info .price_b .price_block .price_item .price {
  padding: 12px 25px;
  font-family: "DIN-Bold", sans-serif;
  font-size: 24px;
  color: #fff;
  background: linear-gradient(135deg, #ff9500, #ff7200);
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(255,149,0,0.2);
}

.page_goods.goods_det .card_div_goods .card_goods_info .price_b .price_block .price_item .price_ago {
  font-family: "DIN-Bold", sans-serif;
  font-size: 18px;
  color: #94a3b8;
  text-decoration: line-through;
}

/* 数量选择和购买按钮 */
.page_goods.goods_det .card_div_goods .card_goods_info .price_b .bottom_handle {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 25px;
}

.page_goods.goods_det .card_div_goods .card_goods_info .price_b .bottom_handle .num_buy_block {
  grid-column: span 4;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 3px 0;
  padding: 5px;
  background: #fff;
  border: 1px solid rgba(255,149,0,0.2);
  border-radius: 12px;
}

.page_goods.goods_det .card_div_goods .card_goods_info .price_b .bottom_handle .num_buy_block .subtract,
.page_goods.goods_det .card_div_goods .card_goods_info .price_b .bottom_handle .num_buy_block .add {
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 149, 0, 0.3);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.page_goods.goods_det .card_div_goods .card_goods_info .price_b .bottom_handle .buy,
.page_goods.goods_det .card_div_goods .card_goods_info .price_b .bottom_handle .cart,
.page_goods.goods_det .card_div_goods .card_goods_info .price_b .bottom_handle .collect {
  grid-column: span 2;
  height: 50px !important;
  line-height: 50px !important;
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  border-radius: 12px !important;
  transition: all 0.3s ease;
  padding: 0px !important;
}

.page_goods.goods_det .card_div_goods .card_goods_info .price_b .bottom_handle .buy {
  background: linear-gradient(135deg, #ff9500, #ff7200) !important;
  color: #fff !important;
  border: none !important;
}

.page_goods.goods_det .card_div_goods .card_goods_info .price_b .bottom_handle .cart,
.page_goods.goods_det .card_div_goods .card_goods_info .price_b .bottom_handle .collect {
  background: #fff;
  border: 1px solid rgba(255,149,0,0.3) !important;
  color: #f1a039!important;
}


/* 商品描述区域 */
.page_goods.goods_det .card_bottom_goods {
  margin-top: 40px;
  padding: 0;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 20px 40px rgba(255,149,0,0.08);
  overflow: hidden;
}

.page_goods.goods_det .card_bottom_goods .options {
  position: relative;
  display: flex;
  padding: 20px;
  background: rgba(255,149,0,0.02);
  border-bottom: 1px solid rgba(255,149,0,0.1);
}

.page_goods.goods_det .card_bottom_goods .options span {
  position: relative;
  padding: 15px 25px;
  font-size: 16px;
  color: #64748b;
  transition: all 0.3s ease;
}

.page_goods.goods_det .card_bottom_goods .options .selected {
  color: #f1a039!important;
  font-weight: 600;
}

.page_goods.goods_det .card_bottom_goods .options .selected:before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 20px;
  height: 3px;
  margin-left: -10px;
  background: #ff9500;
  border-radius: 2px;
}

.page_goods.goods_det .card_bottom_goods .goods_desc_box {
  padding: 30px !important;
  background: #fff !important;
  border-radius: 0 0 24px 24px !important;
}

.page_goods.goods_det .card_bottom_goods .goods_desc_box .goods_detail_item {
  padding: 20px;
  margin-bottom: 20px;
  background: rgba(255,149,0,0.02);
  border-radius: 12px;
  border-left: 4px solid #f1a039!important;
}

/* 响应式样式 */
@media (max-width: 1200px) {
  .page_goods.goods_det .card_div_goods .gods {
    flex-direction: column;
  }

  .page_goods.goods_det .card_div_goods .list_sm_img {
    flex-direction: row;
    width: 100%;
    overflow-x: auto;
    padding: 10px 0;
  }

  .page_goods.goods_det .card_div_goods .list_sm_img .item {
    flex-shrink: 0;
  }
}

@media (max-width: 768px) {
  .page_goods.goods_det > .row {
    margin: 0 20px;
  }

  .page_goods.goods_det .card_div_goods {
    padding: 20px;
  }

  .page_goods.goods_det .card_div_goods .card_goods_info {
    grid-template-columns: 1fr;
  }

  .page_goods.goods_det .card_div_goods .card_goods_info .price_b .bottom_handle {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 滚动条美化 */
.page_goods.goods_det .card_div_goods .list_sm_img::-webkit-scrollbar {
  height: 4px;
}

.page_goods.goods_det .card_div_goods .list_sm_img::-webkit-scrollbar-thumb {
  background: rgba(255,149,0,0.3);
  border-radius: 4px;
}


/* 侧边栏卡片容器 */
.page_goods .card_aside {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 15px 30px rgba(255,149,0,0.08);
  padding: 20px;
  border: 1px solid rgba(255,149,0,0.1);
}

/* 标题样式 */
.page_goods .card_aside h5 {
  margin: 20px 0 30px;
  font-size: 24px;
  font-weight: 700;
  color: #1a2535;
  text-align: center;
  position: relative;
  padding-bottom: 15px;
}

/* 标题装饰 */
.page_goods .card_aside h5::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: linear-gradient(90deg, #ff9500, #ff7200);
  border-radius: 2px;
  top: 40px;
}

/* 热门商品列表容器 */
.page_goods .card_aside .list_goods_hot {
  flex: 1;
  width: 100%;
  overflow: hidden;
  padding: 10px 5px;
}

/* 商品列表网格 */
.page_goods .card_aside .list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 25px;
  width: 100%;
  padding: 10px;
}

/* 商品项样式 */
.page_goods .card_aside .list .goods {
  background: #fff !important;
  border-radius: 16px !important;
  margin: 0 !important;
  box-shadow: 0 8px 20px rgba(255,149,0,0.05) !important;
  border: 1px solid #f1a039!important;
  transition: all 0.3s ease;
  overflow: hidden;
}

/* 商品项悬浮效果 */
.page_goods .card_aside .list .goods:hover {
  transform: translateY(-5px);
  border: 1px solid #f1a039!important;
  box-shadow: 0 15px 30px rgba(255,149,0,0.1) !important;
}

/* 商品导航链接 */
.page_goods .card_aside .list .goods .goods_nav {
  display: block;
  position: relative;
}

/* 商品图片容器 */
.page_goods .card_aside .list .goods .goods_nav .media {
  width: 100%;
  padding: 0 !important;
  height: auto !important;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
  position: relative;
}

/* 商品图片 */
.page_goods .card_aside .list .goods .goods_nav .media img {
  height: 200px !important;
  width: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

/* 图片悬浮效果 */
.page_goods .card_aside .list .goods:hover .goods_nav .media img {
  transform: scale(1.05);
}

/* 商品底部信息 */
.page_goods .card_aside .list .goods .goods_nav .good_bottom {
  width: 100%;
  padding: 15px !important;
  background: #fff;
}

/* 商品价格块 */
.page_goods .card_aside .list .goods .goods_nav .good_bottom .price_block {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
}


/* 商品标题 */
.page_goods .card_aside .list .goods .goods_nav .good_bottom .title {
  font-size: 16px;
  color: #1a2535;
  margin-bottom: 10px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 添加标签装饰 */
.page_goods .card_aside .list .goods .goods_nav::before {
  content: 'HOT';
  position: absolute;
  top: 10px;
  right: 10px;
  background: linear-gradient(135deg, #ff9500, #ff7200);
  color: #fff;
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  z-index: 1;
  box-shadow: 0 4px 10px rgba(255,149,0,0.2);
}

/* 响应式调整 */
@media (max-width: 1200px) {
  .page_goods .card_aside .list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .page_goods .card_aside {
    padding: 15px;
  }

  .page_goods .card_aside h5 {
    font-size: 20px;
    margin: 15px 0 25px;
  }

  .page_goods .card_aside .list {
    gap: 15px;
  }
}

/* 滚动条美化 */
.page_goods .card_aside .list_goods_hot::-webkit-scrollbar {
  width: 4px;
}

.page_goods .card_aside .list_goods_hot::-webkit-scrollbar-thumb {
  background: rgba(255,149,0,0.3);
  border-radius: 4px;
}





/* *************************************购物车别名-商品列表页面开始******************************* */
/* *************************************购物车别名-商品列表页面结束******************************* */
/* *************************************购物车别名-商品列表详情页面开始******************************* */
#app .warp .container .goods_details_box {
  flex-direction: column;
  margin-bottom: 25px;
}
#app .warp .container .goods_details_box .col-12, #app .warp .container .goods_details_box .col-lg-10, #app .warp .container .goods_details_box .col-md-12 {
  width: 100% !important;
  max-width: 100% !important;
}
#app .warp .container .goods_details_box .card_div_goods .div_goods {
  max-width: 100%;
}
#app .warp .container .goods_details_box .card_div_goods .div_goods .row {
  display: flex;
  flex-direction: row;
}
#app .warp .container .goods_details_box .card_div_goods .div_goods .row .col-12, #app .warp .container .goods_details_box .card_div_goods .div_goods .row .col-md-6 {
  max-width: 50% !important;
}
#app .warp .container .goods_details_box .card_div_goods .div_goods .row .card_goods_info {
  width: 98%;
  float: right;
  border: 2px solid #909399;
  box-shadow: 5px 11px 38px rgba(0, 11, 40, 0.5);
}
#app .warp .container .goods_details_box .card_div_goods .div_goods .row .card_goods_info .goods_name {
  font-size: 18px;
  font-weight: normal;
  color: #041126;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
}
#app .warp .container .goods_details_box .card_div_goods .div_goods .row .card_goods_info .description {
  text-indent: 2em;
  font-size: 15px;
  color: #333;
}
#app .warp .container .goods_details_box .card_div_goods .div_goods .card_img .figure {
  border: 2px solid #909399;
  box-shadow: 5px 11px 38px rgba(0, 11, 40, 0.5);
  /* border-radius: 5px; */
}
#app .warp .container .goods_details_box .card_div_goods .div_goods .card_img .list_sm_img .item .sm_figure:hover {
  /* border-color: #041126 !important; */
  box-shadow: 10px 0px 16px rgba(233, 46, 76, 0.3098039216);
}
#app .warp .container .goods_details_box .card_div_goods .div_goods .card_img .list_sm_img .item .little_goodspic_act {
  border: 2px solid #f1a039!important;
}

.icon_wrap {
  color: #f56c6c;
}

#app .warp .container .goods_details_box .card_div_goods .div_goods .row .card_goods_info .sales {
  display: inline;
  padding: 5px 10px;
  text-align: center;
  font-size: 14px;
  border-radius: 5px;
  color: #888;
  float: right;
}

#app .warp .container .goods_details_box .card_div_goods .div_goods .row .card_goods_info .bottom_handle {
  margin-top: 50px;
}

#app .warp .container .goods_details_box .card_div_goods .div_goods .row .card_goods_info .bottom_handle .num_buy_block {
  border-color: #041126;
  height: 40px;
}

.bottom_handle .num_buy_block .subtract,
.bottom_handle .num_buy_block .add {
  color: #041126;
}

#app .warp .container .goods_details_box .card_div_goods .div_goods .row .card_goods_info .bottom_handle .num_buy_block .num {
  color: #666;
}

#app .warp .container .goods_details_box .card_div_goods .div_goods .row .card_goods_info .bottom_handle .buy {
  float: right;
}

#app .warp .container .goods_details_box .card_div_goods .div_goods .row .card_goods_info .bottom_handle .cart {
  font-size: 26px;
  color: #041126;
  position: relative;
  left: 8%;
}

#app .warp .container .goods_details_box .card_div_goods .div_goods .row .card_goods_info .bottom_handle .collect {
  font-size: 20px;
  color: #041126;
  position: relative;
  top: 2px;
}

.bi-heart-fill {
  color: #041126 !important;
}

/* .list_goods_hot .media {
  height: 6rem !important;
} */

#app .warp .container .goods_details_box .card_div_goods .div_goods .row .card_goods_info .bottom_handle .buy:hover {
  background: #343463;
}

#app .warp .container .goods_details_box .card_bottom_goods {
  border: 2px solid transparent;
  border-radius: 5px;
  box-shadow: 5px 11px 38px rgba(0, 11, 40, 0.5);
}

#app .warp .container .goods_details_box .card_bottom_goods .comment_box {
  border: none;
}

#app .warp .container .goods_details_box .card_bottom_goods .options span {
  font-weight: normal;
  color: #333;
  border-bottom: 2px solid transparent;
  padding: 0;
  margin-right: 20px;
  padding: 0 5px 17px;
}

#app .warp .container .goods_details_box .card_bottom_goods .options .selected {
  color: #041126;
  border-color: #041126;
}

#app .warp .container .goods_details_box .card_bottom_goods .goods_desc_box {
  padding: 30px;
  box-sizing: border-box;
}

#app .warp .container .goods_details_box .card_bottom_goods .goods_desc_box .goods_detail_item {
  margin-bottom: 30px;
  display: flex;
  flex-direction: column;
}

#app .warp .container .goods_details_box .card_bottom_goods .goods_desc_box .goods_detail_item label {
  right: 20px;
  margin-right: 5px;
  width: 90px;
  max-width: 160px;
  text-align: right;
  margin-bottom: 0;
  font-size: 16px;
  font-weight: 500;
  position: relative;
  color: #2a303c;
  margin-bottom: 20px;
}

#app .warp .container .goods_details_box .card_bottom_goods .goods_desc_box .goods_detail_item img {
  width: 100px;
  height: 100px !important;
  border-radius: 8px;
  border: 1px solid #041126;
}

#app .warp .container .goods_details_box .card_bottom_goods .goods_desc_box .goods_detail_editor,
#app .warp .container .goods_details_box .card_bottom_goods .goods_desc_box .goods_detail_item span {
  margin-top: -50px;
  font-size: 14px;
  color: #6a6e74;
  margin-left: 88px;
  background: #fafafa;
  padding: 16px;
}

#app .warp .container .goods_details_box .card_bottom_goods .goods_desc_box .goods_detail_editor h1,
#app .warp .container .goods_details_box .card_bottom_goods .goods_desc_box .goods_detail_editor h2,
#app .warp .container .goods_details_box .card_bottom_goods .goods_desc_box .goods_detail_editor h3,
#app .warp .container .goods_details_box .card_bottom_goods .goods_desc_box .goods_detail_editor h4,
#app .warp .container .goods_details_box .card_bottom_goods .goods_desc_box .goods_detail_editor h5,
#app .warp .container .goods_details_box .card_bottom_goods .goods_desc_box .goods_detail_editor h6,
#app .warp .container .goods_details_box .card_bottom_goods .goods_desc_box .goods_detail_editor p,
#app .warp .container .goods_details_box .card_bottom_goods .goods_desc_box .goods_detail_editor div,
#app .warp .container .goods_details_box .card_bottom_goods .goods_desc_box .goods_detail_editor span,
#app .warp .container .goods_details_box .card_bottom_goods .goods_desc_box .goods_detail_editor text {
  font-size: 14px;
  color: #6a6e74;
}

#app .warp .container .goods_details_box .card_bottom_goods .goods_desc_box .goods_detail_editor img {
  width: 100%;
  height: 100%;
}

#app .warp .container .goods_details_box .card_aside {
  background: #fff;
  /* 	border: 1px solid  #a7a7a7; */
}

#app .warp .container .goods_details_box .card_aside .title {
  display: block;
  font-weight: normal;
  font-size: 18px;
  border-bottom: 1px solid #ccc;
  text-align: left;
  color: #333;
  height: 50px;
  line-height: 50px;
  padding-left: 5px;
  margin-bottom: 20px;
}

#app .warp .container .goods_details_box .card_aside .list_goods_hot .card_goods_list .goods {
  display: flex;
  width: calc(25% - 1rem);
  margin: 0.5rem;
  flex-direction: column;
  justify-content: space-between;
  background-color: white;
  border-radius: 0.5rem;
  border: 2px solid #a7a7a7;
  /* box-shadow: 0px 0px 10px #041126; */
}

#app .warp .container .goods_details_box .card_aside .list_goods_hot .card_goods_list .goods .goods_nav {
  display: flex;
  flex-direction: row;
}

#app .warp .container .goods_details_box .card_aside .list_goods_hot .card_goods_list .goods:hover {
  box-shadow: 5px 11px 38px rgba(233, 46, 76, 0.3098039216);
}

#app .page_goods .warp > .container {
  /*    background: url(../img/hero-bg.png); */
  background-size: 100% 100%;
}

#app .warp .container .goods_details_box .card_aside .list_goods_hot .card_goods_list .goods .goods_nav .media img {
  width: 100%;
  height: 100%;
  border-radius: 5px;
}

#app .warp .container .goods_details_box .card_aside .list_goods_hot .card_goods_list .goods .goods_nav .good_bottom {
  width: 54%;
  padding-left: 0;
}

#app .warp .container .goods_details_box .card_aside .list_goods_hot .card_goods_list .goods .goods_nav .good_bottom .title {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
  font-size: 16px;
  border: none;
  margin-bottom: 30px;
}

#app .warp .container .goods_details_box .card_bottom_goods .form_editor .form_editor .editor::before {
  display: none;
}
/* *********************************购物车别名-商品列表详情页面结束 **********************************/




/*********************************** 用户中心开始 **********************************/

.page_user .search_btn_wrap_1 .el-button, .page_user .search_btn_1 .el-button{
  width: 145px !important;
}

.page_user .col-md-9 {
  width: 100% !important;
}

.page_user .col-md-9 .card_addres {
  padding-top: 20px;
}

.page_user .col-md-9 .card_addres > div {
  font-size: 24px;
  text-align: center;
  margin-bottom: 20px;
  color: #ff9500;
  font-weight: bold;
}

.page_user .justify-content-between > .col-12 {
  flex: none !important;
  flex-basis: auto !important;
}

.page_user .justify-content-between > .col-md-9 {
  flex: 1 !important;
  min-width: 0;
}

 #app .address_edit .form_address .justify-content-between {
  display: block;
}
#app .address_edit .form_address .justify-content-between .col-3 {
  width: auto !important;
  max-width: none !important;
}

.page_user .card_menu {
  margin-bottom: 20px;
}

.page_user .card_menu .list_menu {
  display: flex;
  flex-wrap: wrap;
  padding: 15px;
  counter-reset: menuitem;
  border-radius: 8px;
  background-color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.page_user .card_menu .list_menu::after {
  content: "";
  display: block;
  background-color: #fff;
}

.page_user .card_menu .list_menu .menu_item {
  display: block;
  width: auto;
  padding: 10px 15px;
  margin: 8px 4px;
  font-size: 14px;
  color: #f1a039!important;
  text-align: center;
  background-color: #fff;
  border: 1px solid #ff9500;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.page_user .card_menu .list_menu .menu_item:before {
  counter-increment: menuitem;
  content: counter(menuitem) ". ";
}

.page_user .card_menu .list_menu .menu_item:hover {
  background-color: #ff9500;
  color: #fff !important;
  border-color: #ff9500;
}

.page_user .card_menu .list_menu .menu_item.selected {
  color: #fff !important;
  border-color: #f1a039!important;
  background: linear-gradient(121deg, #ff9500, #e08900) !important;
}


.page_user .card_menu .list_menu .menu_item .right_span svg {
  display: none;
}

.page_user .container-fluid {
  padding: 0 !important;
}

.page_user .container-fluid .el-row {
  margin-bottom: 20px;
}

.page_user .container-fluid .el-row:nth-child(1) {
  margin-top: 20px;
  margin-bottom: 30px;
  text-align: center;
  font-weight: bold;
  font-size: 24px;
  color: #ff9500;
}

.page_user .container-fluid .el-row:nth-child(2) {
  display: flex;
  flex-wrap: wrap;
}

.page_user .container-fluid .el-row:nth-child(2) > .el-col-8 {
  width: calc(100% - 10px) !important;
  margin: 5px;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.page_user .container-fluid .el-row:nth-child(2) > .el-col-8:nth-child(1) {
  order: 5;
}

.page_user .container-fluid .el-row:nth-child(2) > .el-col-8:nth-child(2) {
  order: 4;
}

.page_user .container-fluid .el-row:nth-child(2) > .el-col-8:nth-child(3) {
  order: 3;
}

.page_user .container-fluid .el-row:nth-child(2) > .el-col-8:nth-child(4) {
  order: 2;
}

.page_user .container-fluid .el-row:nth-child(2) > .el-col-8:nth-child(5) {
  order: 1;
  width: 100% !important;
}

.page_user .container-fluid .el-row::before {
  display: none;
}

.page_user .container-fluid .el-col:last-child {
  grid-column: span 2;
}

.page_user .container-fluid .chart {
  padding: 20px 0;
  background-color: #fff;
  border-radius: 12px;
  border: 1px solid #ff9500;
}

.page_user .container-fluid .chart > span {
  font-size: 16px;
  color: #ff9500;
  font-weight: bold;
}

.page_user .container-fluid .card {
  min-height: 100%;
  margin: 0;
}

.page_user .card_addres {
  padding: 20px 0 0;
}

.page_user .card_addres .el-row:after {
  display: none;
}

.page_user .card_addres .form.p_4 {
  display: flex;
  flex-direction: column;
  padding: 20px;
  margin-bottom: 20px;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.page_user .card_addres .form.p_4 .row1:first-child {
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.page_user .card_addres .form.p_4 .row1:first-child:before {
  display: none;
}

.page_user .card_addres .form.p_4 .row1:first-child .el_form_search_wrap {
  width: auto !important;
}

.page_user .card_addres .el-form-item {
  display: flex;
  align-items: flex-start;
}

.page_user .card_addres .el-form-item .el-form-item__label {
  padding-left: 8px;
  color: #ff9500;
  font-weight: bold;
  white-space: nowrap;
}

.page_user .card_addres .el-form-item .el-form-item__content {
  margin-left: 0 !important;
}

.page_user .card_addres .el-form-item .el-form-item__content .el-button {
  width: 150px !important;
  background-color: #ff9500;
  border-color: #ff9500;
  color: #fff;
  font-weight: bold;
  transition: all 0.3s ease;
  left: 106px !important;
  /* top: 50px !important; */
}

.page_user .card_addres .el-form-item .el-form-item__content .el-button:hover {
  background-color: #e08900;
  border-color: #e08900;
}

.page_user .card_addres .el-form-item .el-form-item__content .avatar-uploader {
  /* margin-left: 20px; */
}

.page_user .card_addres .el-form-item .el-form-item__content .el-input-number {
  margin-left: 20px;
}

.page_user .card_addres .el-form-item .el-form-item__content .el-input-number input {
  border: 1px solid #DCDFE6;
}

.page_user .card_addres .el-form-item input, .page_user .card_addres .el-form-item select {
  margin-top: 0;
  font-size: 14px;
  border: 0 none;
  border-top: 2px solid #fff;
  border-bottom: 2px solid #e4eaef;
  border-radius: 0;
  box-shadow: none;
}

.page_user .card_addres .el-form-item input:hover, .page_user .card_addres .el-form-item select:hover {
  border-bottom: 2px solid #afb3b9;
}

.page_user .card_addres .el-form-item input:focus, .page_user .card_addres .el-form-item select:focus {
  border-top-color: #fff;
  border-bottom-color: #ff9500;
}

.page_user .card_addres .el-form-item input::-moz-placeholder, .page_user .card_addres .el-form-item select::-moz-placeholder {
  font-size: 14px !important;
}

.page_user .card_addres .el-form-item input::placeholder, .page_user .card_addres .el-form-item select::placeholder {
  font-size: 14px !important;
}

.page_user .card_addres > div:nth-child(1) {
  text-align: center;
}

.page_user .card_addres .table_wrap {
  background-color: #fff !important;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.page_user .card_addres .table_wrap .el-table thead th {
  background: #ff9500;
  color: rgba(255, 255, 255, 0.9);
  font-weight: bold;
}

.page_user .card_addres .table_wrap .el-table .el-button {
  width: 6rem !important;
  background-color: #f1a039!important;
  border-color: #f1a039!important;
  color: #fff;
  font-weight: bold;
  transition: all 0.3s ease;
}

.page_user .card_addres .table_wrap .el-table .el-button:hover {
  background-color: #e08900 !important;
  border-color: #e08900 !important;
}

.page_user .card_addres .table_wrap .el-pagination {
  padding: 20px 5px 10px;
  text-align: center;
  font-size: 16px;
}

.page_user .search_btn_wrap_1,
.page_user .search_btn_1 {
  width: 100% !important;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

.page_user .search_btn_wrap_1 .el-button,
.page_user .search_btn_1 .el-button {
  width: 145px !important;
  background-color: #ff9500;
  border-color: #ff9500;
  color: #fff;
  font-weight: bold;
  transition: all 0.3s ease;
}

.page_user .search_btn_wrap_1 .el-button:hover,
.page_user .search_btn_1 .el-button:hover {
  background-color: #e08900;
  border-color: #e08900;
}

.page_user .el-table__body, .page_user .el-table__footer, .page_user .el-table__header {
  border-collapse: collapse;
}

.page_user th {
  border: 1px solid #e4eaef;
}

.page_user .user_right_box {
  margin: 0 0 50px 0;
  width: 100%;
  height: 100%;
  background-color: #fff !important;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.page_user .user_right_box .filter_block {
  display: flex;
  justify-content: flex-end;
  position: relative;
  padding-bottom: 22px;
}

.page_user .user_right_box .filter_block:before {
  content: "收藏列表";
  font-size: 18px;
  position: absolute;
  left: 0;
  right: 0;
  top: 22px;
  text-align: center;
  font-weight: bold;
  color: #fff;
}

.page_user .user_right_box .filter_block .bar_filter {
  display: flex;
  align-items: center;
  position: relative;
  top: 6px;
}

.page_user .user_right_box .filter_block .bar_filter .dropdown .btn {
  font-size: 14px;
  width: 98px;
  text-align: center;
  height: 32px;
  line-height: 20px;
  border-color: #ff9500;
  color: #ff9500;
  transition: all 0.3s ease;
}

.page_user .user_right_box .filter_block .bar_filter .dropdown .btn:hover {
  background: #ff9500;
  color: #fff;
}

.page_user .user_right_box .filter_block .bar_filter .dropdown .dropdown-menu {
  border-color: #ff9500;
}

.page_user .user_right_box .filter_block .bar_filter .dropdown .dropdown-menu li {
  border-bottom: 1px solid #ccc;
}

.page_user .user_right_box .filter_block .bar_filter .dropdown .dropdown-menu li:hover {
  background: #f1a039!important;
}

.page_user .user_right_box .filter_block .bar_filter .dropdown .dropdown-menu li .dropdown-item {
  font-size: 14px;
  color: #666;
}

.page_user .user_right_box .list_collect {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  padding: 20px;
}

.page_user .user_right_box .list_collect .item_collect {
  padding: 15px;
  margin: 0;
  border-bottom: 1px solid #e4eaef;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.page_user .user_right_box .list_collect .item_collect:nth-last-child(1) {
  border: none;
}

.page_user .user_right_box .list_collect .item_collect:nth-child(2n-1) {
  border-right: 1px solid #e4eaef;
}

.page_user .user_right_box .list_collect .item_collect:hover {
  background-color: #fafafa;
  transform: translateY(-5px);
}

.page_user .user_right_box .list_collect .item_collect:hover::after {
  right: 30px;
  visibility: visible;
  opacity: 1;
}

.page_user .user_right_box .list_collect .item_collect:hover .btn_delete {
  right: 40px;
  visibility: visible;
  opacity: 1;
}

.page_user .user_right_box .list_collect .item_collect:hover .collect_box .left_block:after {
  opacity: 0.65 !important;
  visibility: visible !important;
}

.page_user .user_right_box .list_collect .item_collect:hover .collect_box .right_block .top_comment .time {
  opacity: 1 !important;
  visibility: visible !important;
}

.page_user .user_right_box .list_collect .item_collect .collect_box {
  display: block !important;
}

.page_user .user_right_box .list_collect .item_collect .collect_box .left_block {
  position: relative;
  width: 100%;
  height: 200px;
  padding: 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e4eaef;
}

.page_user .user_right_box .list_collect .item_collect .collect_box .left_block img {
  width: 100% !important;
  height: 100% !important;
}

.page_user .user_right_box .list_collect .item_collect .collect_box .left_block:after {
  content: "";
  position: absolute;
  top: 10px;
  right: 10px;
  bottom: 10px;
  left: 10px;
  background-color: transparent;
  opacity: 0;
  visibility: hidden;
  z-index: 1;
  transition: all 0.4s ease 0s;
}

.page_user .user_right_box .list_collect .item_collect .collect_box .right_block .top_comment {
  display: flex;
  flex-direction: column;
  padding: 20px 0 0;
}

.page_user .user_right_box .list_collect .item_collect .collect_box .right_block .top_comment .title {
  font-size: 16px;
  font-weight: bold;
  color: #1a2535;
}

.page_user .user_right_box .list_collect .item_collect .collect_box .right_block .top_comment .time {
  position: absolute;
  top: 100px;
  left: 60px;
  z-index: 2;
  color: #fff;
  font-size: 14px;
  margin-top: 8px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease 0s;
}


.page_user .user_right_box .list_collect .item_collect .btn_delete {
  position: absolute;
  bottom: 35px;
  right: 10px;
  font-size: 20px;
  cursor: pointer;
  color: #fff;
  z-index: 1;
  visibility: hidden;
  opacity: 0;
  transition: all 0.5s;
}

.page_user .user_right_box .list_collect .item_collect .btn_delete:hover {
  background: transparent;
}

.el-form-item__content{
  display: flex;
}

/* 全局增强 */
.page_user {
  padding-bottom: 60px;
  background: linear-gradient(135deg, #f9f9f9 0%, #f1f1f1 100%);
}

/* 菜单栏高级优化 */
.page_user .card_menu .list_menu {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255,149,0,0.1);
}

.page_user .card_menu .list_menu:before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,149,0,0.05), transparent);
  animation: menuShine 3s infinite;
}

@keyframes menuShine {
  100% { left: 150%; }
}

.page_user .card_menu .list_menu .menu_item {
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 8px rgba(255,149,0,0.1);
}

.page_user .card_menu .list_menu .menu_item:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255,149,0,0.1);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.3s, height 0.3s;
}

.page_user .card_menu .list_menu .menu_item:hover:after {
  width: 120px;
  height: 120px;
}


.page_user .card_addres input:focus,
.page_user .card_addres select:focus {
  box-shadow: 0 4px 12px rgba(255,149,0,0.15);
}

/* 表格高级优化 */
.page_user .el-table thead th {
  position: relative;
  overflow: hidden;
}

.page_user .el-table thead th:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: #ff9500;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.page_user .el-table thead th:hover:after {
  transform: scaleX(1);
}

/* 收藏列表高级优化 */
.page_user .user_right_box .list_collect .item_collect {
  position: relative;
  transform-style: preserve-3d;
}

.page_user .user_right_box .list_collect .item_collect:before {
  /* content: ""; */
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border: 2px solid #ff9500;
  border-radius: 14px;
  opacity: 0;
  transform: scale(0.95);
  transition: all 0.4s ease;
}

.page_user .user_right_box .list_collect .item_collect:hover:before {
  opacity: 1;
  transform: scale(1);
}

.page_user .user_right_box .list_collect .item_collect .btn_delete {
  background: rgba(255,149,0,0.9);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transform: scale(0);
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.page_user .user_right_box .list_collect .item_collect:hover .btn_delete {
  transform: scale(1);
  opacity: 1;
  visibility: visible;
}

/* 按钮高级动效 */
.page_user .el-button {
  position: relative;
  overflow: hidden;
  transition: all 0.4s ease !important;
}

.page_user .el-button:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 300px;
  background: rgba(255,255,255,0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.6s ease;
}

.page_user .el-button:hover:after {
  transform: translate(-50%, -50%) scale(1);
}

/* 统计卡片悬浮效果 */
.page_user .container-fluid .el-col-8 {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.page_user .container-fluid .el-col-8:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(255,149,0,0.15);
}

/* 分页高级样式 */
.page_user .el-pagination {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.page_user .el-pagination .number {
  width: 36px;
  height: 36px;
  border-radius: 50% !important;
  transition: all 0.3s ease;
}

.page_user .el-pagination .number:hover {
  background: #f1a039!important;
  color: #fff !important;
}

/* 输入框动态图标 */
.page_user .el-form-item__content:after {
  content: "✎";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #ff9500;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.page_user .el-form-item__content:focus-within:after {
  opacity: 1;
}


/* 用户中心 */
.page_user {
  background: linear-gradient(135deg, #fffaf5 0%, #fff5eb 100%) !important;
  position: relative !important;
  overflow: hidden !important;
}


@keyframes cosmicDust {
  0% { transform: rotate(0deg) scale(1); opacity: 0.8; }
  50% { transform: rotate(180deg) scale(1.2); opacity: 1; }
  100% { transform: rotate(360deg) scale(1); opacity: 0.8; }
}

/* 菜单栏量子特效 */
.card_menu .list_menu {
  background: linear-gradient(145deg, #ffffff, #fff8f0) !important;
  border: 2px solid rgba(255,149,0,0.1) !important;
  box-shadow: 0 8px 32px rgba(255,149,0,0.1) !important;
  position: relative !important;
  overflow: visible !important;
}

.menu_item {
  position: relative !important;
  background: rgba(255,255,255,0.9) !important;
  border: 2px solid #f1a039!important;
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
  transform-style: preserve-3d !important;
}

.menu_item:before {
  content: '' !important;
  position: absolute !important;
  top: -2px !important;
  left: -2px !important;
  right: -2px !important;
  bottom: -2px !important;
  border: 2px solid transparent !important;
  border-radius: 8px !important;
  animation: menuGlow 3s linear infinite !important;
}

@keyframes menuGlow {
  0%,100% { border-color: rgba(255,149,0,0.2); }
  50% { border-color: rgba(255,149,0,0.5); }
}

.menu_item:hover {
  transform: translateY(-5px) rotateX(5deg) !important;
  background: #f1a039!important;
  box-shadow: 0 10px 30px rgba(255,149,0,0.3) !important;
}


.el-form-item {
  position: relative !important;
  margin-bottom: 35px !important;
}

.el-form-item__label {
  transition: all 0.4s ease !important;
  background: linear-gradient(90deg, #ff9500, #ff7200) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.el-form-item__content:focus-within + .el-form-item__label {
  transform: translateY(0) !important;
  font-size: 14px !important;
}

input, select {
  background: rgba(255,255,255,0.9) !important;
  border: 2px solid rgba(255,149,0,0.2) !important;
  border-radius: 8px !important;
  transition: all 0.3s ease !important;
}

input:focus, select:focus {
  box-shadow: 0 0 0 3px rgba(255,149,0,0.1) !important;
  border-color: #f1a039!important;
}

/* 表格 */
.el-table thead th {
  background: linear-gradient(145deg, #ff9500, #ff7200) !important;
  color: #fff !important;
  position: relative !important;
}

.el-table thead th:after {
  content: '';
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 3px !important;
  background: rgba(255,255,255,0.3) !important;
  animation: tableFlow 3s linear infinite !important;
}

@keyframes tableFlow {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* 收藏列表 */
.item_collect {
  background: linear-gradient(145deg, #ffffff, #fff8f0) !important;
  border: 2px solid transparent !important;
  transform-style: preserve-3d !important;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1) !important;
}

.item_collect:hover {
  transform: perspective(1000px) rotateX(3deg) rotateY(-3deg) translateZ(20px) !important;
  box-shadow: 0 15px 40px rgba(255,149,0,0.2) !important;
}

.btn_delete {
  background: linear-gradient(45deg, #ff9500, #ff7200) !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  transform: scale(0) !important;
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
}

.item_collect:hover .btn_delete {
  transform: scale(1) !important;
}

/* 按钮 */
.el-button {
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
}


@keyframes buttonPulse {
  100% { transform: rotate(360deg); }
}

.el-button:hover {
  transform: translateY(-5px) scale(1.05) !important;
  box-shadow: 0 10px 30px rgba(255,149,0,0.4) !important;
}

/* 分页星际导航 */
.el-pagination {
  background: linear-gradient(145deg, #ffffff, #fff8f0) !important;
  border: 2px solid rgba(255,149,0,0.1) !important;
  border-radius: 30px !important;
}

.el-pagination .number {
  border: 2px solid rgba(255,149,0,0.2) !important;
  transition: all 0.3s ease !important;
}

.el-pagination .number:hover {
  background: #f1a039!important;
  color: #fff !important;
  transform: scale(1.1) !important;
}


/* 动态边缘光效 */
[class*="card"]:not(.menu_item)::after {
  content: '';
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 2px solid transparent !important;
  border-radius: inherit !important;
  animation: cardHalo 3s linear infinite !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

@keyframes cardHalo {
  0%,100% { border-color: rgba(255,149,0,0.1); }
  50% { border-color: rgba(255,149,0,0.3); }
}

.page_user .card_addres .el-form-item{
  display: flex;
  align-items: center;
}

#app .page_user .warp > .container{
  max-width: 1814px !important;
}

.page_user .card_addres > div:nth-child(1) > span{
  position: relative;
  display: inline-block !important;
  vertical-align: top;
  float: none !important;
  padding-left: 0 !important;
  padding: 0 10px !important;
  height: auto !important;
  font-size: 20px !important;
  line-height: 47px;
  font-weight: 600;
  color: #ff9950 !important;
  background: none;
  display: flex !important;
  justify-content: center !important;
}

.page_user .container-fluid .el-row:nth-child(1) div{
  position: relative;
  display: flex !important;
  justify-content: center !important;
  vertical-align: top;
  float: none !important;
  padding-left: 0 !important;
  padding: 0 10px !important;
  height: auto !important;
  font-size: 20px !important;
  line-height: 47px;
  font-weight: 600;
  color: #ff9950 !important;
}


.list_menu{
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.page_user .card_addres .form.p_4 {
  display: flex;
  flex-direction: column;
  padding: 20px;
  margin-bottom: 20px;
  background-color: #f8faff;
  border-radius: 10px;
  border: 1px solid #dfe7f2 !important;
}

.page_user .card_addres .form.p_4 .row1:first-child {
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.page_user .card_addres .form.p_4 .row1:first-child .el_form_search_wrap{
  width: auto !important;
}

.el-pager li{
  line-height: 33px !important;
}

.el-pager li.active{
  color: #ff7200 !important;
}

.el-select-dropdown__item.selected{
  color: #ff7200 !important;
}

.el-pagination button:hover{
  color: #ff7200 !important;
}
/*********************************** 用户中心结束 **********************************/



/* 收货地址开始 */
/* 收货地址页面基础样式 */

.page_user .card_address {
  padding: 30px !important;
  background: linear-gradient(135deg, rgba(255, 149, 0, 0.05), rgba(255, 114, 0, 0.08)) !important;
  border-radius: 20px !important;
  margin: 0px 0 0 511px !important;
}


/* 页面标题 */
.page_user .card_address .address_title {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 30px !important;
}

.page_user .card_address .address_title h3 {
  font-size: 24px !important;
  font-weight: 600 !important;
  color: #2c3e50 !important;
}

/* 新增地址按钮 */
.page_user .card_address .list_address .btn_address {
  position: static !important;
  padding: 10px 24px !important;
  background: linear-gradient(135deg, #ff9500, #ff7200) !important;
  color: #fff !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  border-radius: 12px !important;
  transition: all 0.3s ease !important;
  height: 3.2rem !important;
}

.page_user .card_address .list_address .btn_address:hover {
  background: linear-gradient(135deg, #ff9500, #ff7200) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(255, 149, 0, 0.2) !important;
}

/* 地址列表 */
.page_user .card_address .list_address {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0 !important;
  margin-top: 30px !important;
  gap: 20px;
}

/* 地址卡片 */
.page_user .card_address .address_card {
  position: relative !important;
  padding: 25px !important;
  background: #fff !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255, 149, 0, 0.1) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03) !important;
  transition: all 0.3s ease !important;
}

/* 地址序号 */
.page_user .card_address .address_card:before {
  content: "Address " counter(addressitem) !important;
  position: absolute !important;
  top: -12px !important;
  left: 20px !important;
  padding: 4px 12px !important;
  background: linear-gradient(135deg, #ff9500, #ff7200) !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  border-radius: 20px !important;
  box-shadow: 0 4px 12px rgba(255, 149, 0, 0.2) !important;
}

/* 地址内容 */
.page_user .card_address .address_info {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

/* 用户信息 */
.page_user .card_address .user_info {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
}

.page_user .card_address .name {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #2c3e50 !important;
}

.page_user .card_address .phone {
  color: #64748b !important;
}

/* 地址详情 */
.page_user .card_address .address_bottom {
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: #64748b !important;
}

/* 默认标签 */
.page_user .card_address .list_address .address_card .address_info .address_content .tag .tag_default {
  position: absolute !important;
  top: 20px !important;
  right: 20px !important;
  padding: 4px 12px !important;
  background: rgba(255, 149, 0, 0.1) !important;
  color: #f1a039!important;
  font-size: 12px !important;
  font-weight: 500 !important;
  border-radius: 20px !important;
}

/* 操作按钮组 */
.page_user .card_address .action_buttons {
  display: flex !important;
  gap: 10px !important;
  margin-top: 20px !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.page_user .card_address .action_btn {
  flex: 1 !important;
  padding: 8px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-align: center !important;
  border-radius: 8px !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
}

.list_address .bar_btn > button {
  flex: 1;
  min-width: 10rem;
  border: 1px solid #ff7200;
  padding: 10px; /* 增加内边距使按钮看起来更舒适 */
  font-size: 16px; /* 设置字体大小 */
  color: #ff7200; /* 文字颜色与边框颜色匹配 */
  background-color: transparent; /* 初始背景透明 */
  cursor: pointer; /* 鼠标悬停时变为手型 */
  transition: all 0.3s ease; /* 平滑过渡效果 */
  border-radius: 8px; /* 圆角处理 */
}

/* 按钮悬浮效果 */
.list_address .bar_btn > button:hover {
  background-color: #ff7200; /* 背景颜色变化 */
  color: #fff; /* 文字颜色变白 */
  box-shadow: 0 4px 15px rgba(255, 114, 0, 0.3); /* 添加阴影效果 */
}

/* 点击效果 */
.list_address .bar_btn > button:active {
  transform: translateY(1px); /* 点击时稍微下移 */
  box-shadow: 0 2px 8px rgba(255, 114, 0, 0.2); /* 减少阴影效果 */
}

/* 卡片悬浮效果 */
.page_user .card_address .address_card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 15px 35px rgba(255, 149, 0, 0.1) !important;
  border-color: #f1a039!important;
}

/* 响应式适配 */
@media (max-width: 768px) {
  .page_user .card_address {
    padding: 20px !important;
  }
  
  .page_user .card_address .list_address {
    grid-template-columns: 1fr !important;
  }
  
  .page_user .card_address .action_buttons {
    flex-direction: column !important;
  }
}
/* 收货地址结束 */




/*********************************** 我的账户开始 **********************************/
.page_user .user_bg.col-md-9 {
  margin: 20px auto 0 !important;
  max-width: 100% !important;
  background: #f9f9f9 !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

/* 用户信息卡片 */
.page_user .user_bg.col-md-9 .card_default {
  padding: 20px !important;
  background: #fff !important;
  border-radius: 12px !important;
}

/* 用户信息块 */
.page_user .user_bg.col-md-9 .card_default .user_block {
  display: flex !important;
  align-items: center !important;
  padding-top: 20px !important;
  background: rgba(255, 149, 0, 0.1) !important;
  border-radius: 12px !important;
  position: relative !important;
}

/* 个人信息标题 */
.page_user .user_bg.col-md-9 .card_default .user_block:before {
  content: "Personal Information" !important;
  position: absolute !important;
  top: 15px !important;
  left: 20px !important;
  font-size: 22px !important;
  font-weight: bold !important;
  color: #f1a039!important;
}

/* 头像块 */
.page_user .user_bg.col-md-9 .card_default .user_block .img_block {
  position: relative !important;
  margin-right: 20px !important;
  background: #fff !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

.page_user .user_bg.col-md-9 .card_default .user_block .img_block img {
  width: 120px !important;
  height: 120px !important;
  border-radius: 50% !important;
}

/* 昵称 */
.page_user .user_bg.col-md-9 .card_default .user_block .nickname {
  padding: 0 30px !important;
  font-size: 16px !important;
  color: #5e6671 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
}

.page_user .user_bg.col-md-9 .card_default .user_block .nickname:before {
  content: "Name:" !important;
  font-size: 16px !important;
  color: #1a2535 !important;
  margin-right: 5px !important;
}

/* 用户组 */
.page_user .user_bg.col-md-9 .card_default .user_block .user_group {
  padding: 0 30px !important;
  margin-top: 10px !important;
  font-size: 16px !important;
  color: #5e6671 !important;
}

.page_user .user_bg.col-md-9 .card_default .user_block .user_group:before {
  content: "Role:" !important;
  font-size: 16px !important;
  color: #1a2535 !important;
  margin-right: 5px !important;
}

/* 退出按钮 */
.page_user .user_bg.col-md-9 .card_default .user_block .log_out {
  display: flex !important;
  justify-content: center !important;
  padding: 20px !important;
  border-top: 1px solid #e4eaef !important;
}

.page_user .user_bg.col-md-9 .card_default .user_block .log_out .btn {
  width: 200px !important;
  height: 48px !important;
  font-size: 16px !important;
  font-weight: bold !important;
  color: #fff !important;
  background: #f1a039!important;
  border-radius: 8px !important;
  transition: background-color 0.3s ease !important;
}

.page_user .user_bg.col-md-9 .card_default .user_block .log_out .btn:hover {
  background: #e08900 !important;
}

.page_user .user_bg.col-md-9 .card_default .user_block .log_out .btn:nth-child(1){
  background: #f1a039!important;
}

.page_user .user_bg.col-md-9 .card_default .user_block .log_out .btn.btn-info{
  background: #f1a039!important;
}

.page_user .user_bg.col-md-9 .card_default .user_block .log_out .btn:nth-child(1):hover{
  background: #e08900 !important;
}

.page_user .user_bg.col-md-9 .card_default .user_block .log_out .btn.btn-info:hover{
  background: #e08900 !important;
}

/* 卡片信息 */
.page_user .card_info {
  width: 100% !important;
  padding: 20px !important;
  background: rgba(255, 149, 0, 0.1) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

.page_user .card_info .div_info .content_msg {
  padding: 70px 15px 15px !important;
  position: relative !important;
}

.page_user .card_info .div_info .content_msg::before {
  content: "Welcome To Your Profile" !important;
  position: absolute !important;
  top: 15px !important;
  left: 20px !important;
  font-size: 18px !important;
  font-weight: bold !important;
  color: #f1a039!important;
}

/* 头像和昵称 */
.page_user .card_info .div_info .content_msg .figure_avatar {
  overflow: hidden !important;
  height: 110px !important;
  margin-bottom: 20px !important;
}

.page_user .card_info .div_info .content_msg .figure_avatar .user_avator {
  width: 100px !important;
  height: 100px !important;
  border-radius: 50% !important;
  /* float: left !important; */
  margin-right: 10px !important;
}

.page_user .card_info .div_info .content_msg .nickname > div {
  font-size: 16px !important;
}

.page_user .card_info .div_info .content_msg .nickname > div:first-child {
  color: #8a929b !important;
}

.page_user .card_info .div_info .content_msg .nickname > div span {
  font-size: 16px !important;
  color: #1a2535 !important;
}

/* 修改按钮 */
.page_user .card_info .div_info .right_msg .change_avatar_box .change_avatar,
.page_user .card_info .div_info .right_msg .change_nickname_box .change_nickname {
  border: 1px solid #041126 !important;
  color: #041126 !important;
  font-size: 16px !important;
  width: 100px !important;
  height: 34px !important;
  line-height: 34px !important;
  border-radius: 5px !important;
  text-align: center !important;
  background-color: #fff !important;
  margin-bottom: 10px !important;
  margin-left: 10px !important;
  transition: background-color 0.3s ease !important;
}

.page_user .card_info .div_info .right_msg .change_avatar_box .change_avatar:hover,
.page_user .card_info .div_info .right_msg .change_nickname_box .change_nickname:hover {
  background-color: #041126 !important;
  color: #fff !important;
}

/* 密码表单 */
.page_user .card_password {
  width: 100% !important;
  padding: 0 0 40px 0 !important;
  background: rgba(255, 149, 0, 0.1) !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

.page_user .card_password form {
  padding: 30px 60px !important;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.page_user .card_password form .form-group {
  display: flex !important;
  align-items: baseline !important;
}

.page_user .card_password form .form-group .d-block {
  width: 200px !important;
  padding-right: 15px !important;
  text-align: right !important;
  font-size: 14px !important;
  line-height: 35px !important;
}

.page_user .card_password form .form-group input,
.page_user .card_password form .form-group select {
  font-size: 14px !important;
  border: 0 !important;
  border-bottom: 2px solid #e4eaef !important;
  transition: border-color 0.3s ease !important;
  width: 100%;
  padding: 12px 45px 12px 16px;
  font-size: 14px;
  color: #2c3e50;
  background: #f8f9fa;
  border: 2px solid transparent;
  border-radius: 12px;
  transition: all 0.3sease
}

.page_user .card_password form .form-group input:focus,
.page_user .card_password form .form-group select:focus {
  border-bottom-color: #f1a039!important;
}

#app .page_user .warp .container .row .card_password .password_confim .btn_item{
  width: 200px !important;
  height: 48px !important;
  font-size: 16px !important;
  font-weight: bold !important;
  color: #fff !important;
  background: #f1a039!important;
  border-radius: 8px !important;
  transition: background-color 0.3s ease !important;
  padding: 2px 8px !important;
}

#app .page_user .warp .container .row .card_password .password_confim .btn_item:hover{
  width: 200px !important;
  height: 48px !important;
  font-size: 16px !important;
  font-weight: bold !important;
  color: #fff !important;
  background: #f1a039!important;
  border-radius: 8px !important;
  transition: background-color 0.3s ease !important;
  padding: 2px 8px !important;
}

#app .page_user .warp .container .row .card_password .password_confim {
  display: flex;
  align-items: center;
  justify-content: center;
}

.page_user .card_info .div_info .right_msg .btn{
  width: 200px !important;
  height: 48px !important;
  font-size: 16px !important;
  font-weight: bold !important;
  color: #fff !important;
  background: #f1a039!important;
  border-radius: 8px !important;
  transition: background-color 0.3s ease !important;
}

.page_user .card_info .div_info .right_msg .btn:hover{
  width: 200px !important;
  height: 48px !important;
  font-size: 16px !important;
  font-weight: bold !important;
  color: #fff !important;
  background: #f1a039!important;
  border-radius: 8px !important;
  transition: background-color 0.3s ease !important;
}

.wallet-container{
  margin: 0 0 0 0 !important;
  width: 100% !important;
  background-color: rgba(255, 149, 0, 0.1) !important;
  padding: 30px 20px;
  font-size: 16px;
}

.wallet-write-input input{
  font-size: 14px !important;
  border: 0 !important;
  border-bottom: 2px solid #e4eaef !important;
  transition: border-color 0.3s ease !important;
  width: 100%;
  padding: 12px 45px 12px 16px;
  font-size: 14px;
  color: #2c3e50;
  background: #f8f9fa;
  border: 2px solid transparent;
  border-radius: 12px;
  transition: all 0.3sease
}

.wallet-write-input input:focus {
  border-bottom-color: #f1a039!important;
}

.wallet-recharged-money span {
  width: 60px !important;
  text-align: center !important;
  padding: 8px 0 !important;
  background: #f1a039!important; /* 使用主题色 */
  color: #ffffff !important; /* 确保文本颜色与背景形成良好的对比 */
  margin-right: 15px !important;
  margin-bottom: 5px !important;
  border-radius: 4px !important; /* 增加圆角半径使外观更柔和 */
  transition: background-color 0.3s ease, transform 0.2s ease !important; /* 添加过渡效果 */
  font-weight: bold !important; /* 加粗字体让元素更突出 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important; /* 轻微的阴影增加层次感 */
}

/* 悬停时改变背景颜色和提升一点位置，增加互动性 */
.wallet-recharged-money span:hover {
  background: #e08900 !important; /* 主题色的稍暗版本 */
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important; /* 增强阴影 */
}

.wallet-left-name{
  font-weight: 600;
}

.page_user .el-button{
  width: 200px !important;
  height: 48px !important;
  font-size: 16px !important;
  font-weight: bold !important;
  color: #fff !important;
  background: #f1a039!important;
  border-radius: 8px !important;
  transition: background-color 0.3s ease !important;
}

.page_user .el-button:hover{
  /* width: 200px !important; */
  height: 48px !important;
  font-size: 16px !important;
  font-weight: bold !important;
  color: #fff !important;
  background: #f1a039!important;
  border-radius: 8px !important;
  transition: background-color 0.3s ease !important;
}



/*********************************** 我的账户结束 **********************************/





/* ********************************我的订单开始************************************ */
/* 订单页面基础样式 */
#app .page_order {
  padding: 40px 20px;
  background: linear-gradient(135deg, rgba(255, 149, 0, 0.05), rgba(255, 114, 0, 0.08));
}

/* 订单容器 */
#app .page_order .container {
  max-width: 1200px;
  margin: 0 auto 40px;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

/* 订单卡片 */
#app .page_order .card_goods_list {
  padding: 30px;
}

/* 筛选栏 */
#app .page_order .filter_block {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
  background: #fff;
  border-bottom: 1px solid rgba(255, 149, 0, 0.1);
  justify-content: center;
}

.page_order .filter_block .btn {
  padding: 10px 24px;
  color: #2c3e50;
  background: #f8f9fa;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  transition: all 0.3s ease;
  font-size: 14px;
  font-weight: 500;
}

.page_order .filter_block .btn:hover {
  background: #ff9500;
  color: #fff;
  border-color: #ff9500;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 149, 0, 0.2);
}

/* 订单项 */
#app .page_order .list_order .item_order {
  position: relative;
  margin: 20px 0;
  background: #fff;
  border-radius: 16px;
  border: 1px solid rgba(255, 149, 0, 0.1);
  overflow: hidden;
  transition: all 0.3s ease;
}

/* 订单状态标签 */
#app .page_order .item_order .state {
  position: absolute;
  top: 0;
  right: 0;
  padding: 8px 20px;
  background: linear-gradient(135deg, #ff9500, #ff7200);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  border-radius: 0 16px 0 16px;
  transform: none;
}

/* 商品列表 */
#app .page_order .goods_list .item_goods {
  display: flex;
  align-items: center;
  padding: 24px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  flex-direction: column;
}

.goods_list .middle_info {
  width: 100% !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-wrap: nowrap;
}

.flex_sbc{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  flex-wrap: nowrap;
}

.sum_price[data-v-da787a50]{
  height: 4.5rem !important;
}

/* 商品图片 */
#app .page_order .item_goods .img_block {
  width: 120px;
  height: 120px;
  /* margin-right: 24px; */
  border-radius: 70px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border: 2px solid #ff7200;
}

#app .page_order .item_goods .img_block img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

/* 商品信息 */
#app .page_order .item_goods .middle_info {
  flex: 1;
  padding: 0 24px;
}

#app .page_order .middle_info .title {
  font-size: 18px;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 12px;
}

#app .page_order .middle_info .description {
  font-size: 14px;
  color: #64748b;
  line-height: 1.6;
}

/* 价格信息 */
#app .page_order .right_info {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-direction: row;
  margin: 30px 0px 0px 10px;
}

#app .page_order .right_info .price {
  padding: 8px 16px;
  background: #ff9500;
  color: #fff;
  font-weight: 700;
  border-radius: 24px;
  box-shadow: 0 4px 12px rgba(255, 149, 0, 0.2);
}

/* 底部信息 */
#app .page_order .bottom_order {
  padding: 24px;
  background: #f8fafc;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

/* 操作按钮 */
#app .page_order .btn_trade {
  padding: 12px 28px;
  background: linear-gradient(135deg, #ff9500, #ff7200) !important;
  color: #fff;
  font-weight: 700;
  border-radius: 12px;
  border: none;
  transition: all 0.3s ease;
}

#app .page_order .btn_trade:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255, 149, 0, 0.3);
}

/* 删除按钮 */
#app .page_order .card_goods_list .list_order .item_order .sum_price .btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  background: rgba(255, 71, 87, 0.1) !important;
  color: #ff4757 !important;
  border-radius: 12px !important;
  visibility: visible !important;
  opacity: 1 !important;
  transition: all 0.3s ease !important;
}

#app .page_order .card_goods_list .list_order .item_order .sum_price .btn :hover {
  background: #ff4757 !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(255, 71, 87, 0.2) !important;
}

/* 悬浮效果 */
#app .page_order .item_order:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(255, 149, 0, 0.15);
  border-color: #ff9500;
}

#app .page_order .item_order:hover .img_block img {
  transform: scale(1.1);
}

#app .page_order .goods_list .num{
  font-size: 1rem !important;
}

#app .page_order .img_block img{
  width: 100% !important;
  height: 100% !important;
  border-radius: 70px;
}

/* 响应式适配 */
@media (max-width: 768px) {
  #app .page_order .item_goods {
    flex-direction: column;
    align-items: flex-start;
  }
  
  #app .page_order .right_info {
    margin-top: 20px;
  }
}
/* ********************************我的订单结束************************************ */



/* 优惠卷页面开始 */
/* 统一主题色变量 */
:root {
  --primary-color: #ff9500;
  --primary-light: rgba(255, 149, 0, 0.1);
}

/* 导航选项卡优化 */
#app .page_pay .nav-tabs {
  position: relative;
  border-bottom: 2px solid #f0f0f0;
}

#app .page_pay .nav-tabs .nav-item {
  position: relative;
  margin: 0 15px;
}

#app .page_pay .nav-tabs .nav-link {
  border: none !important;
  font-weight: 500;
  color: #666;
  transition: all 0.3s ease;
  padding: 12px 25px !important;
  border-radius: 6px 6px 0 0 !important;
}

#app .page_pay .nav-tabs .nav-link::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--primary-color);
  transition: width 0.3s ease;
}

#app .page_pay .nav-tabs .nav-link:hover {
  color: var(--primary-color);
}

#app .page_pay .nav-tabs .nav-link.active {
  background: none !important;
  color: var(--primary-color) !important;
}

#app .page_pay .nav-tabs .nav-link.active::after {
  width: 100%;
}

/* 卡片样式升级 */
#app .page_pay .card {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease;
  overflow: hidden;
}

#app .page_pay .card:hover {
  transform: translateY(-5px);
}

#app .page_pay .card .card-header {
  position: relative;
  padding: 20px;
  background: linear-gradient(135deg, #fff5eb, #ffe9cc);
}

#app .page_pay .card .card-header::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--primary-color);
}

/* 输入框动效 */
#app .page_pay .card .card-body .tabs .tab-content .tab-pane input {
  transition: all 0.3s ease;
  border-bottom: 2px solid rgba(255, 149, 0, 0.3);
}

#app .page_pay .card .card-body .tabs .tab-content .tab-pane input:focus {
  border-color: var(--primary-color);
  box-shadow: 0 4px 6px rgba(255, 149, 0, 0.1);
}

/* 按钮样式升级 */
#app .page_pay .card .card-body .card-footer .btn {
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  letter-spacing: 1px;
  box-shadow: 0 4px 15px rgba(255, 149, 0, 0.3);
}

#app .page_pay .card .card-body .card-footer .btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  transition: 0.6s;
}

#app .page_pay .card .card-body .card-footer .btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 149, 0, 0.4);
}

#app .page_pay .card .card-body .card-footer .btn:hover::before {
  left: 100%;
}

/* 优惠券盒子重设计 */
#app .page_pay .coupon_box {
  position: relative;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
  background: linear-gradient(135deg, #ff9500, #ffaa33) !important;
  height: 120px !important;
}

#app .page_pay .coupon_box::before {
  content: "✦ 优惠券";
  position: absolute;
  top: 10px;
  right: -45px;
  transform: rotate(45deg);
  background: rgba(255, 255, 255, 0.15);
  padding: 5px 40px;
  font-size: 12px;
  color: #000;
}

#app .page_pay .coupon_box:hover {
  transform: translateY(-3px);
}

#app .page_pay .coupon_box > div:first-child {
  position: relative;
  border-right: 2px dashed rgba(255, 255, 255, 0.3);
  padding: 10px;
}

#app .page_pay .coupon_box > div:nth-child(2) {
  color: white;
}

#app .page_pay .coupon_box button {
  position: relative;
  overflow: hidden;
  border: 1px solid white !important;
  transition: all 0.3s ease;
}

#app .page_pay .coupon_box button:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  transform: scale(1.05);
}

/* 价格强调动画 */
@keyframes pricePulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

#app .page_pay .coupon_box > div:first-child > div:first-child {
  font-weight: bold;
  color: #fff;
  animation: pricePulse 1.5s ease-in-out infinite;
}
/* 优惠卷页面结束 */





/* 基础样式结束 */
/* 论坛点赞收藏后的字体颜色 */
.icon_change,
.word_change {
  color: #d10000 !important;
}

.card_link {
  position: relative;
  /* top: 108px !important; */
  width: 100%;
  display: flex;
  background-color: #041126;
  flex-direction: row;
  justify-content: center;
  flex-direction: column;
}

.list_link {
  position: relative;
}

.link_box {
  margin-right: 10px !important;
}

.goods_al {
  display: none;
}

.card_aside h5 {
  text-align: center;
  margin-top: 10px;
}

.div_goods .gods {
  flex-direction: column-reverse;
  align-content: center;
}

.div_goods .gods .col-md-6 {
  flex: 0 0 100%;
  max-width: 100%;
}

.form_login,
.forget_container {
  width: 100% !important;
  display: flex;
  padding: 0px !important;
}

.form_box {
  display: flex;
  flex-direction: row;
  width: 100%;
}
.form_box .forms {
  background-color: #f3f1f1;
  padding: 1rem !important;
  width: 50%;
}
.form_box .btns_bottom {
  background-color: #ffeee7;
  width: 50%;
}

.add,
.search_btn_add {
  border: none !important;
  border-radius: 10px;
}

.cell {
  display: flex;
  flex-direction: column;
}
.cell .el-button {
  margin: 5px !important;
  color: #fff !important;
  border: none !important;
}

.el_form_search_wrap {
  width: 35% !important;
}

.el-upload-dragger {
  width: 180px !important;
}

.edit_wrap .el_form_btn_warp {
  width: 100% !important;
  margin-top: 50px;
}

.edit_wrap .el_form_btn_warp .el-form-item__content {
  margin-left: 250px !important;
  /* width: 100% !important; */
}

.edit_wrap .el-form-item__content .el_form_btn {
  /* width: 14% !important; */
  margin-top: 10px;
}

.edit_wrap .el_form_item_warp {
  width: 50% !important;
}

.page_user .el-button,
#app .diy_details_box .details_btn,
.submit_button,
#app .diy_edit .warp .container > .row .btn_box .btn_submit,
#app .page_user .warp .container .row .card_password .password_confim .btn_item,
.btn_save {
  position: relative;
  width: 150px !important;
  padding: 15px 8px;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: bold;
  text-align: center;
  color: #fff !important;
  border: 0 none;
  border-radius: 4px;
}
.bg {
  background-color: transparent !important;
}

#app .search_btn_wrap_1 button,
#app .search_btn_1 button {
  margin: 5px !important;
}

.card_goods_info .bottom_handle .cart[data-v-c80f17e6]:hover {
  color: red !important;
}

.card_goods_info .bottom_handle .collect[data-v-c80f17e6]:hover {
  color: red !important;
}

.options span[data-v-10dbac5f]:hover {
  color: red !important;
}

.page_footer .container {
  max-width: 100% !important;
}

#root_demo {
  background: transparent !important;
}

.table thead th {
  background: linear-gradient(180deg, rgb(220, 240, 255) 0%, rgb(245, 246, 250) 100%) !important;
}

.table-striped tbody tr:nth-of-type(odd) {
  background: linear-gradient(270deg, #fff, #f2f9ff) !important;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.65);
  font-weight: 400;
}

.table-striped tbody tr:nth-of-type(even) {
  background: linear-gradient(270deg, #fff, #f2f9ff) !important;
  color: rgba(0, 0, 0, 0.65);
  font-weight: 400;
  font-size: 14px;
}

/* *********************元素样式************************** */
#root_demo .model3 {
  background: url(../img/bottom-shape.png) no-repeat bottom;
  background-size: 100% 300px;
  background-color: #F9F8F7 !important;
}

#root_demo > .warp:nth-last-child(4) .diy_view_list .diy_list_box_wrap .diy_list_img_box .diy_img,
#root_demo .model3 .diy_view_list .diy_list_box_wrap .diy_list_img_box .diy_img {
  width: 60%;
  height: 200px;
  margin-top: 30px;
}

#root_demo > .warp:nth-last-child(4) .diy_view_list .diy_list_box_wrap .diy_list_img_box .diy_img img,
#root_demo .model3 .diy_view_list .diy_list_box_wrap .diy_list_img_box .diy_img img {
  border-radius: 50%;
}

.btn-outline-success {
  position: absolute;
  right: 40px;
  top: 25%;
  transform: translateY(-50%);
  background-color: #f1a039!important;
  color: #fff !important;
  border: none !important;
  width: 150px !important;
}

.btn-outline-success span:before {
  content: "发布";
}

.btn-outline-dark:hover,
.btn-secondary:hover {
  color: #fff;
  background-color: #003F5D !important;
  border: 1px solid #003F5D !important;
}

.novel_read {
  padding-top: 85px !important;
  min-height: 70vh;
}

.el-main {
  overflow: hidden !important;
}

#outerdiv {
  width: 1300px !important;
  margin: 40px auto 0 !important;
}

@media (max-width: 1330px) {
  .page_goods .page_goods_list_wrap .page_goods_list_hot {
    left: 70px;
    margin-left: 0;
  }
}
@media (max-width: 830px) {
  .show .nav_warp {
    height: 100vh;
  }
}
#inneriframe{
	width:100%  !important;
}
.chat_box [class*=" el-icon-"], .chat_box [class^=el-icon-]{
	font-size: inherit;
}
#app .page_account .form_box .forms .form-group{
	position: relative;
}
.form_login #input-group-1::before, .form_login #input-group-2::before{
	position: absolute;
	top: 13px;
	left: 15px;
}
.form_login #input-group-2::before{
	left: 31px;
}

.btn-secondary {
  background-color: #003F5D !important;
  border: 1px solid #003F5D !important;
}

.page_goods .page_goods_list_hot .list .goods .goods_nav .media img,.page_goods .card_aside .list .goods .goods_nav .media img{
  height: 100% !important;
}

.goods{
  background-color: rgba(255, 149, 0, 0.2) !important;
}



/* 首页 */

.article_recommend{
  padding: 80px 0 50px !important;
}


.el-range-editor.el-input__inner{
  height: 48px !important;
  margin-right: 10px !important;
  max-width: 350px;
  border: 2px solid rgba(255,149,0,0.2) !important;
  border-radius: 8px;
}
.el-range-editor.el-input__inner input{
	border: none !important;
	height: 44px !important;
}
.diy_list .diy_list_container .diy_list_search .view.Search .el-range-editor.el-input__inner input{
	padding-right: 0 !important;
}
.diy_list .diy_list_container .diy_list_search .view.Search .el-date-editor .el-range-separator{
	line-height: 40px;
}
.el-date-editor--daterange.el-input__inner{
  width: auto !important;
}

.el-button{
  background: #ff7200 !important;
  border: 1px solid #ff7200 !important;
  color: #fff !important;
  margin-left: 10px !important;
}


.page_root .ins.model2 .list {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 24px !important;
    margin: 2rem auto !important;
    position: relative !important;
    transform: rotate(-1deg) !important; /* 整体微旋转 */
}

/* 创意卡片布局系统 */
.page_root .ins.model2 .list > * {
    position: relative !important;
    border-radius: 12px !important;
    background: linear-gradient(145deg, #fff8f2, #ffffff) !important;
    box-shadow: 
        8px 8px 24px rgba(255,149,0,0.08),
        -4px -4px 16px rgba(255,149,0,0.03) !important;
    overflow: visible !important;
    transition: none !important; /* 禁用动画 */
}

/* 非对称偏移布局 */
.page_root .ins.model2 .list > *:nth-child(4n+1) {
    transform: translateY(12%) rotate(3deg) !important;
    z-index: 1 !important;
}

.page_root .ins.model2 .list > *:nth-child(4n+2) {
    transform: translateY(5%) rotate(-2deg) !important;
    z-index: 2 !important;
}

.page_root .ins.model2 .list > *:nth-child(4n+3) {
    transform: translateY(8%) rotate(1deg) !important;
    z-index: 3 !important;
}

.page_root .ins.model2 .list > *:nth-child(4n+4) {
    transform: translateY(15%) rotate(-3deg) !important;
    z-index: 4 !important;
}

/* 几何装饰系统 */
.page_root .ins.model2 .list::before {
    content: "";
    position: absolute !important;
    top: -50px;
    left: -30px;
    right: -30px;
    bottom: -50px;
    background: 
        linear-gradient(45deg, transparent 65%, rgba(255,149,0,0.05) 65.1%),
        repeating-linear-gradient(
            -30deg,
            rgba(255,149,0,0.03),
            rgba(255,149,0,0.03) 15px,
            transparent 15px,
            transparent 30px
        ) !important;
    z-index: -1 !important;
}

/* 卡片装饰元素 */
.page_root .ins.model2 .list > *::after {
    content: "";
    position: absolute !important;
    bottom: -8px;
    right: -8px;
    width: 40%;
    height: 40%;
    background: linear-gradient(135deg, #f1a03920%, #ffad33) !important;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 20% 100%) !important;
    z-index: -1 !important;
    opacity: 0.3 !important;
}

.page_root .ins.model2 .list > *:nth-child(even)::after {
    left: -8px !important;
    right: auto !important;
    clip-path: polygon(0 0, 80% 0, 100% 100%, 0 100%) !important;
}

/* 主题色点缀系统 */
.page_root .ins.model2 .list > *::before {
    content: "";
    position: absolute !important;
    top: 12px;
    left: 12px;
    width: 32px;
    height: 32px;
    background: rgba(255,149,0,0.1) !important;
    border-radius: 50% !important;
    border: 2px solid rgba(255,149,0,0.2) !important;
}

/* 响应式布局调整 */
@media (max-width: 1200px) {
    .page_root .ins.model2 .list {
        grid-template-columns: repeat(3, 1fr) !important;
        transform: rotate(-0.5deg) !important;
    }
    
    .page_root .ins.model2 .list > *::after {
        width: 50% !important;
        height: 50% !important;
    }
}

@media (max-width: 768px) {
    .page_root .ins.model2 .list {
        grid-template-columns: repeat(2, 1fr) !important;
        transform: none !important;
    }
    
    .page_root .ins.model2 .list > * {
        transform: none !important;
    }
}

.page_root .ins.model2 .list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
    perspective: 1000px !important;
    margin: 2rem auto !important;
    position: relative !important;
    justify-content: center !important;
    align-items: stretch !important;
}

/* 动态卡片变形系统 */
.page_root .ins.model2 .list > * {
    flex: 1 1 calc(25% - 20px) !important;
    min-width: 280px !important;
    max-width: 400px !important;
    transform-style: preserve-3d !important;
    border-radius: 16px !important;
    background: linear-gradient(145deg, #fff5f0 30%, #fff 90%) !important;
    box-shadow: 
        0 4px 16px rgba(255,149,0,0.1),
        0 8px 32px rgba(255,149,0,0.05) !important;
    transition: 
        transform 0.6s cubic-bezier(0.23, 1, 0.32, 1),
        flex-basis 0.4s !important;
    cursor: pointer !important;
    overflow: hidden !important;
    position: relative !important;
    clip-path: polygon(
        0 0, 
        100% 0, 
        100% calc(100% - 20px), 
        calc(100% - 20px) 100%, 
        0 100%
    ) !important; 
}

/* 智能流体交互 */
.page_root .ins.model2 .list:hover > *:not(:hover) {
    flex-basis: calc(20% - 20px) !important;
    filter: saturate(0.7) brightness(0.98) !important;
    transform: 
        rotateZ(-1deg) 
        translateZ(-10px) !important;
}

.page_root .ins.model2 .list > *:hover {
    flex-basis: calc(35% - 20px) !important;
    transform: 
        rotateZ(2deg) 
        translateY(-15px) 
        translateZ(20px) !important;
    box-shadow: 
        0 12px 40px rgba(255,149,0,0.2),
        0 24px 80px -20px rgba(255,149,0,0.15) !important;
    z-index: 2 !important;
}


@keyframes flow {
    from { transform: translateY(-50%) rotate(5deg) translateX(-10%); }
    to { transform: translateY(-50%) rotate(5deg) translateX(10%); }
}

/* 卡片边缘光效 */
.page_root .ins.model2 .list > *::after {
    content: "";
    position: absolute !important;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border: 2px solid rgba(255,149,0,0.3);
    border-radius: 18px;
    opacity: 0;
    transition: 0.4s !important;
    filter: drop-shadow(0 0 8px rgba(255,149,0,0.2));
}

.page_root .ins.model2 .list > *:hover::after {
    opacity: 1 !important;
    animation: glow 1.5s ease-in-out infinite !important;
}

@keyframes glow {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 0.4; }
}

/* 智能响应式系统 */
@media (max-width: 1200px) {
    .page_root .ins.model2 .list > * {
        flex-basis: calc(50% - 20px) !important;
        clip-path: polygon(
            0 0, 
            100% 0, 
            100% calc(100% - 15px), 
            calc(100% - 15px) 100%, 
            0 100%
        ) !important;
    }
    
    .page_root .ins.model2 .list:hover > *:not(:hover) {
        flex-basis: calc(45% - 20px) !important;
    }
}

@media (max-width: 768px) {
    .page_root .ins.model2 .list > * {
        flex-basis: 100% !important;
        clip-path: none !important;
        max-width: 100% !important;
    }
}



.page_root .product .carousel .slide[class] {  /* 增加属性选择器提升优先级 */
  position: relative;
  margin: 0 62px !important;
  width: calc(28% - 59px) !important;
  overflow: visible !important; /* 为伪元素溢出留出空间 */
  border: 2px solid #ff9500; /* 替换主题色 */
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(255,149,0,0.2);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background: linear-gradient(145deg, #fff 0%, #fff9f5 100%);
  padding: 10px !important;
}

/* 橙色光晕效果 */
.page_root .product .carousel .slide::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: 12px;
  background: radial-gradient(circle at 50% 0%, rgba(255,149,0,0.15), transparent 70%);
  pointer-events: none;
}

/* 动态角标 */
.page_root .product .carousel .slide::after {
  content: 'NEW';
  position: absolute;
  top: 4px;
  right: -12px;
  padding: 8px 15px;
  background: #ff9500;
  color: white;
  font-size: 12px;
  font-weight: bold;
  border-radius: 20px;
  transform: rotate(10deg);
  box-shadow: 0 2px 8px rgba(255,149,0,0.3);
  z-index: 2;
}

/* 悬浮动效 */
.page_root .product .carousel .slide:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(255,149,0,0.3);
}

/* 点击反馈 */
.page_root .product .carousel .slide:active {
  transform: scale(0.98);
}

/* 增加边框动效 */
.page_root .product .carousel .slide {
  border-image: linear-gradient(45deg, #ff9500, #ffc107);
  border-image-slice: 1;
  animation: borderGlow 2s infinite alternate;
}

@keyframes borderGlow {
  from { border-image-source: linear-gradient(45deg, #ff9500, #ffc107); }
  to { border-image-source: linear-gradient(45deg, #ffc107, #ff9500); }
}



.page_root .product .list_goods .lis_cont .doc{
  padding: 9px !important;
}

.right_send {
  height: auto !important;
  background: #ebeef5 !important;
  border-radius: 10px !important;
  border: 1px solid #dfe7f2 !important;
}

.el-tabs__item:hover{
  color: #ff9500!important;
}

.el-tabs__item.is-active{
  color: #ff9500!important;
}

.el-tabs__active-bar{
  background-color: #ff9500!important;
}


/* 轮播图容器升级 */
.banner .sw_no .swiper_img {
  border-radius: 16px!important;
  overflow: hidden!important;
  box-shadow: 0 24px 48px rgba(0,0,0,0.1)!important;
  transform: translateZ(0)!important;
}

/* 导航按钮全息改造 */
.banner .carousel-control-prev,
.banner .carousel-control-next {
  width: 48px!important;
  height: 48px!important;
  backdrop-filter: blur(8px)!important;
  background: rgba(255,255,255,0.9)!important;
  border: 2px solid #ff9500!important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1)!important;
  box-shadow: 0 8px 24px rgba(255,149,0,0.2)!important;
  bottom: 40px!important;
}

.banner .carousel-control-prev { right: 140px!important; }
.banner .carousel-control-next { right: 40px!important; }

/* 箭头图形重构 */
.banner .carousel-control-next-icon,
.banner .carousel-control-prev-icon {
  background: linear-gradient(45deg, #ff9500, #ff6b00)!important;
  mask: url(../img/icon_arrow.svg) center/contain no-repeat!important;
  width: 32px!important;
  height: 32px!important;
  transition: transform 0.3s ease!important;
}

/* 导航按钮悬停动效 */
.banner .carousel-control-prev:hover,
.banner .carousel-control-next:hover {
  transform: translateY(-3px) scale(1.1)!important;
  background: #ff9500!important;
}

.banner .carousel-control-prev:hover .carousel-control-prev-icon,
.banner .carousel-control-next:hover .carousel-control-next-icon {
  background: linear-gradient(45deg, white, #fff5eb)!important;
}

/* 指示器现代改造 */
.banner .carousel-indicators {
  flex-direction: row!important;
  gap: 12px!important;
}

.banner .carousel-indicators li {
  width: 40px!important;
  height: 3px!important;
  border-radius: 2px!important;
  background: rgba(255,255,255,0.3)!important;
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1)!important;
}

.banner .carousel-indicators li.active {
  width: 60px!important;
  background: linear-gradient(90deg, #ff9500, #ff6b00)!important;
  box-shadow: 0 2px 8px rgba(255,149,0,0.3)!important;
}

/* 通知卡片全息升级 */
.page_root .warp .swiper_box .sw_no .card_notice {
  width: 72%!important;
  top: 320px!important;
  left: 14%!important;
  height: 140px!important;
  backdrop-filter: blur(12px)!important;
  background: rgba(255,255,255,0.95)!important;
  border: 1px solid rgba(255,149,0,0.15)!important;
  box-shadow: 0 16px 40px rgba(255,149,0,0.1)!important;
  border-radius: 12px!important;
  overflow: hidden!important;
}

/* 标题栏霓虹效果 */
.page_root .warp .swiper_box .sw_no .card_notice .notice_title {
  width: 24%!important;
  margin-left: 0%!important;
  height: 80px!important;
  background: linear-gradient(135deg, #ff9500, #ff6b00)!important;
  /* clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%)!important; */
  position: relative!important;
  transition: transform 0.4s ease!important;
}

.page_root .warp .swiper_box .sw_no .card_notice .notice_title:hover {
  transform: translateX(8px)!important;
}

/* 标题装饰元素 */
.page_root .warp .swiper_box .sw_no .card_notice .notice_title::before {
  content: "NOTICE"!important;
  position: absolute!important;
  top: 43%!important;
  left: 16%!important;
  transform: translateY(-50%)!important;
  font: 900 24px/1 'Arial'!important;
  color: rgba(255,255,255,0.1)!important;
  letter-spacing: 4px!important;
}

/* 内容区域动效 */
.page_root .warp .swiper_box .sw_no .card_notice .carousel-item {
  padding: 30px!important;
  transition: all 0.4s ease!important;
}

.page_root .warp .swiper_box .sw_no .card_notice .carousel-item:hover {
  transform: translateY(-4px)!important;
  background: rgba(255,255,255,0.96)!important;
  box-shadow: 0 8px 24px rgba(255,149,0,0.1)!important;
}

/* 标题文字特效 */
.page_root .warp .swiper_box .sw_no .card_notice .swiper_notice .title {
  font-size: 18px!important;
  color: #1a2535!important;
  position: relative!important;
  padding-left: 32px!important;
}

.page_root .warp .swiper_box .sw_no .card_notice .swiper_notice .title::before {
  content: ""!important;
  position: absolute!important;
  left: 0!important;
  top: 62%!important;
  width: 100%!important;
  height: 3px!important;
  background: #ff9500!important;
  transform: translateY(-50%)!important;
}


.content[data-v-fcaa2f38]:before{
  position: relative !important;
}


.article_recommend .title span, .diy_recommend .title span, .notice_list_title .title span, .article_list_title .title span, .good_list_title .title span, .diy_list_title .title span {
  position: relative !important;
  display: inline-block !important;
  color: #f1a039!important;
  font-size: 24px !important;
  font-weight: 600 !important;
  padding: 0 15px !important;
  margin-bottom: 15px !important;
  letter-spacing: 1px !important;
}

.article_recommend .more_box,
.diy_recommend .more_box,
.notice_list_title .more_box,
.article_list_title .more_box,
.good_list_title .more_box,
.diy_list_title .more_box {
  display: flex !important;
  justify-content: center !important;
  width: 120px !important;
  margin: 20px auto 0 !important;
  padding: 12px 0 !important;
  position: relative !important;
  overflow: hidden !important;
  border-radius: 24px !important;
  background: rgba(255,149,0,0.08) !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  bottom: 30px;
  height: 50px!important;
}

.article_recommend .more_box .more,
.diy_recommend .more_box .more,
.notice_list_title .more_box .more,
.article_list_title .more_box .more,
.good_list_title .more_box .more,
.diy_list_title .more_box .more {
  position: relative !important;
  width: 100% !important;
  height: 44px !important;
  padding: 0 32px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #f1a039!important;
  border: none !important;
  background: linear-gradient(45deg, transparent 50%, rgba(255,149,0,0.1) 50%) !important;
  background-size: 250% 100% !important;
  border-radius: 20px !important;
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
  z-index: 2 !important;
}

/* 流光动画效果 */
.article_recommend .more_box .more::before,
.diy_recommend .more_box .more::before,
.notice_list_title .more_box .more::before,
.article_list_title .more_box .more::before,
.good_list_title .more_box .more::before,
.diy_list_title .more_box .more::before {
  content: ""!important;
  position: absolute!important;
  top: -50%;
  left: -50%;
  width: 200%!important;
  height: 200%!important;
  background: conic-gradient(
    rgba(255,149,0,0.3) 0deg,
    rgba(255,149,0,0.1) 90deg,
    transparent 180deg,
    rgba(255,149,0,0.2) 270deg
  )!important;
  animation: auraRotate 4s linear infinite!important;
  z-index: -1!important;
}

@keyframes auraRotate {
  100% { transform: rotate(360deg); }
}

/* 悬浮状态效果 */
.article_recommend .more_box .more:hover,
.diy_recommend .more_box .more:hover,
.notice_list_title .more_box .more:hover,
.article_list_title .more_box .more:hover,
.good_list_title .more_box .more:hover,
.diy_list_title .more_box .more:hover {
  background-position: 100% 0% !important;
  box-shadow: 0 8px 24px rgba(255,149,0,0.2) !important;
  transform: translateY(-2px) !important;
}

/* 文字装饰效果 */
.article_recommend .more_box .more::after,
.diy_recommend .more_box .more::after,
.notice_list_title .more_box .more::after,
.article_list_title .more_box .more::after,
.good_list_title .more_box .more::after,
.diy_list_title .more_box .more::after {
  content: "→"!important;
  position: absolute!important;
  right: 16px!important;
  top: 50%!important;
  transform: translateY(-50%)!important;
  opacity: 0!important;
  transition: all 0.4s ease!important;
}

.article_recommend .more_box .more:hover::after,
.diy_recommend .more_box .more:hover::after,
.notice_list_title .more_box .more:hover::after,
.article_list_title .more_box .more:hover::after,
.good_list_title .more_box .more:hover::after,
.diy_list_title .more_box .more:hover::after {
  opacity: 1!important;
  right: 24px!important;
}

/* 文字渐隐动画 */
.article_recommend .more_box .more span,
.diy_recommend .more_box .more span,
.notice_list_title .more_box .more span,
.article_list_title .more_box .more span,
.good_list_title .more_box .more span,
.diy_list_title .more_box .more span {
  display: inline-block!important;
  background: linear-gradient(90deg, #f1a0390%, #ff6b00 100%)!important;
  -webkit-background-clip: text!important;
  background-clip: text!important;
  color: transparent!important;
  position: relative!important;
  z-index: 2!important;
}

.list_forum .bottom>*[data-v-2456a72b]{
  font-size: 0.8rem !important;
}



/* 样式问题修复 */
.el-upload-dragger{
  background-color: rgba(255, 149, 0, 0.1) !important;
  border: 1px dashed #f1a039!important;
  border-radius: 20px !important;
}

.el-upload-dragger .el-upload__text{
  color: #000 !important;
  font-size: 13p !important;
  text-align: center;
}

.el-upload-dragger .el-upload__text em{
  color: #f1a039!important;
}

.el-button--primary.is-plain{
  background: #f1a039!important;
  border-color: #fff !important;
  color: #fff !important;
  border-radius: 8px !important;
  width: 6rem !important;
  margin: 0 0px 10px 0;
  font-size: 16px;
  font-weight: 700;
  /* height: 48px !important; */
}

.el-button--primary.is-plain:hover{
  background: #f1a039!important;
  border-color: #fff !important;
  color: #fff !important;
}

.cell{
  align-items: center !important;
}


.el-avatar>img{
  width: 100% !important;
  height: 100% !important;
}

.edit_wrap .el_form_item_warp{
  width: 100% !important;
}

.el-radio{
  margin-right: 0px !important;
  white-space: pre-line !important;
}

.el-radio__label{
  padding-left: 0px !important;
}



.title_margin{
  margin-left: 0 !important;
}


.el-upload-dragger .el-upload__text{
  font-size: 13px !important;
}

.ql-editor{
  line-height: 14.42 !important;
}

#app .diy_edit .form-item .diy_down select{
  width: 193px !important;
}

.chat_box{
  border: 1px solid #f1a039!important;
}

.page_chat{
  padding-top: 10px !important;
}

.email,.phone{
  display: none !important;
}

.btn-block{
  background: #f1a039!important;
  border-color: #f1a039!important;
  color: #fff !important;
}

.btn-block:hover{
  background: #f1a039!important;
  border-color: #f1a039!important;
  color: #fff !important;
}


.edit_wrap .el-form-item__content .el_form_btn {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: center;
}

.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
  background-color: #f1a039!important;
  border-color: #f1a039!important;
}

.el-checkbox__inner:hover{
  border-color: #f1a039!important;
}

.page_forum .container .row .card_forum_list .search_box > button{
  right: 465px !important;
}
.page_forum .container .row .card_forum_list .search_box > input{
  margin-right: 10px !important;
}
.sw_no{
  width: 74%;
}

.page_root .warp .swiper_box .sw_no .card_notice{
  width: 26% !important;
  display: flex !important;
  box-sizing: border-box !important;
  position: absolute !important;
  background: #fff !important;
  top: 0px !important;
  left: 74% !important;
  z-index: 999 !important;
  height: 400px !important;
  padding-left: 0 !important;
  border-radius: 0px !important;
  flex-direction: column-reverse !important;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: space-between;
}
.page_root .warp .swiper_box .sw_no .card_notice .notice_title{
  width: 100% !important;
}
.page_root .warp .swiper_box .sw_no .card_notice .carousel{
  width: 100% !important;
  height: 200px !important;
}

.banner{
  background-color: #eef6ff !important;
}

.chat_box {
  position: relative;
  padding: 16px;
  border-radius: 12px !important;
  /* background: #fff8f0; */
  border: 2px solid #ff7200 !important;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px -1px rgba(255, 149, 0, 0.3), 0 2px 4px -1px rgba(255, 149, 0, 0.3);
}

.el-date-editor--datetimerange.el-input__inner{
  width: 60% !important;
}



/* 用 ::after 覆盖新图片 */
.support_entry::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99999999999999999999999999;
  
  /* 显示新图片 */
  display: block;
  width: 100%;
  height: 100%;
  background: url(../img/logo1.png) no-repeat center;
  
  /* 圆形样式 */
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.1);
  
  /* 恢复交互 */
  pointer-events: auto;
}

/* 悬停动画 */
.support_entry:hover::after {
  transform: scale(1.05);
  filter: brightness(1.1);
}

.list_message .item_message .left_block .user_info{
  font-size: 20px !important;
  color: #f1a039!important;
  font-weight: 700 !important;
}

.list_sm_img{
  margin-top: 0px !important;
}


/* 强制所有 tooltip 置顶 */
.el-tooltip__popper {
  z-index: 9999 !important;
}

/* 深色主题适配 */
.el-tooltip__popper.is-dark {
  background: #303133;
  color: #FFF;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3); /* 增加投影提升立体感 */
}





/* 购物车重构 */
.page_cart {
  padding-bottom: 30px !important;
  background-color: #f9f9f9 !important;
  position: relative !important;
}

.page_cart::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 6px !important;
  background: linear-gradient(90deg, #ff9500, #ffb700) !important;
}

.page_cart .warp .container {
  margin: 25px auto 50px !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  border: 0 none !important;
  border-radius: 15px !important;
  min-height: auto !important;
  max-width: 1200px !important;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05) !important;
  background-color: #fff !important;
  overflow: hidden !important;
  transition: all 0.3s ease !important;
}

.page_cart .warp .container:hover {
  box-shadow: 0 8px 25px rgba(255, 149, 0, 0.15) !important;
  transform: translateY(-3px) !important;
}

.page_cart .warp .container .row {
  margin: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
}

.page_cart .warp .container .col {
  position: relative !important;
  width: 100% !important;
  padding: 0 !important;
}

.page_cart .warp .container .col .delet {
  position: absolute !important;
  top: 118px !important;
  right: 20px !important;
  width: 100px !important;
  height: 38px !important;
  line-height: 38px !important;
  font-size: 14px !important;
  font-weight: bold !important;
  text-align: center !important;
  color: #fff !important;
  border-radius: 20px !important;
  background: linear-gradient(90deg, #ff9500, #ffb700) !important;
  box-shadow: 0 3px 10px rgba(255, 149, 0, 0.3) !important;
  transition: all 0.3s ease !important;
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 10 !important;
}

.page_cart .warp .container .col .delet:hover {
  transform: scale(1.05) !important;
  box-shadow: 0 5px 15px rgba(255, 149, 0, 0.4) !important;
}

.page_cart .warp .container .card {
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  height: auto !important;
  max-height: none !important;
  background-color: transparent !important;
  width: 100% !important;
}

.page_cart .warp .container .card h4 {
  padding: 25px 30px !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  color: #333 !important;
  border-bottom: 1px solid #eee !important;
  position: relative !important;
  margin: 0 0 15px 0 !important;
  letter-spacing: 0.5px !important;
}

/* .page_cart .warp .container .card h4:after {
  content: " / My Cart" !important;
  color: #f1a039!important;
  font-weight: 400 !important;
  font-style: italic !important;
} */

.page_cart .warp .container .card h4::before {
  content: "🛒" !important;
  margin-right: 10px !important;
}

.page_cart .warp .container .card .cart_block {
  display: flex !important;
  flex-direction: column-reverse !important;
  min-height: auto !important;
  padding: 0 20px 20px !important;
}

.page_cart .warp .container .card .cart_block .list_cart {
  margin: 15px 0 0 !important;
}

.page_cart .warp .container .card .cart_block .list_cart .item_cart {
  position: relative !important;
  padding: 0 !important;
  margin: 15px 0 !important;
  border: 1px solid #eee !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
  display: flex !important;
  align-items: center !important;
}

.page_cart .warp .container .card .cart_block .list_cart .item_cart:hover {
  border-color: #f1a039!important;
  box-shadow: 0 5px 15px rgba(255, 149, 0, 0.1) !important;
  transform: translateY(-2px) !important;
}

.page_cart .warp .container .card .cart_block .list_cart .item_cart:nth-child(2n) {
  background-color: #fffaf0 !important;
}

.page_cart .warp .container .card .cart_block .list_cart .item_cart .choose_btn {
  margin: 0 15px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
}

.page_cart .warp .container .card .cart_block .list_cart .item_cart .choose_btn .btn_circle {
  width: 20px !important;
  height: 20px !important;
  border: 2px solid #ddd !important;
  border-radius: 50% !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  cursor: pointer !important;
}

.page_cart .warp .container .card .cart_block .list_cart .item_cart .choose_btn:hover .btn_circle {
  border-color: #f1a039!important;
}

.page_cart .warp .container .card .cart_block .list_cart .item_cart .choose_btn.active .btn_circle {
  background: #f1a039!important;
  border-color: #f1a039!important;
}

.page_cart .warp .container .card .cart_block .list_cart .item_cart .choose_btn.active .btn_circle::after {
  content: "✓" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  color: white !important;
  font-size: 12px !important;
}

.page_cart .warp .container .card .cart_block .list_cart .item_cart .cart_body {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  padding: 15px 0 !important;
}

.page_cart .warp .container .card .cart_block .list_cart .item_cart .cart_body .img_block {
  box-sizing: content-box !important;
  width: 110px !important;
  height: 110px !important;
  /* padding: 10px 20px 10px 0 !important; */
  position: relative !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}

.page_cart .warp .container .card .cart_block .list_cart .item_cart .cart_body .img_block img {
  border-radius: 10px !important;
  transition: all 0.5s ease !important;
  object-fit: cover !important;
  width: 100% !important;
  height: 100% !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1) !important;
}

.page_cart .warp .container .card .cart_block .list_cart .item_cart:hover .cart_body .img_block img {
  transform: scale(1.05) !important;
}

.page_cart .warp .container .card .cart_block .list_cart .item_cart .cart_body .img_block::after {
  content: "" !important;
  position: absolute !important;
  top: 10px !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(135deg, rgba(255, 149, 0, 0.2), transparent 70%) !important;
  border-radius: 10px !important;
  pointer-events: none !important;
}

.page_cart .warp .container .card .cart_block .list_cart .item_cart .cart_body .right_info {
  position: static !important;
  display: grid !important;
  grid-template-columns: 2fr 3fr !important;
  align-items: center !important;
  flex-direction: row !important;
  padding-right: 120px !important;
  flex: 1 !important;
  gap: 15px !important;
  height: 110px !important;
}

.page_cart .warp .container .card .cart_block .list_cart .item_cart .cart_body .right_info .title {
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  font-size: 17px !important;
  font-weight: bold !important;
  margin-top: 0 !important;
  border-right: 1px dashed #eee !important;
  padding: 0 20px 0 0 !important;
  color: #333 !important;
  transition: all 0.3s ease !important;
  line-height: 1.4 !important;
}

.page_cart .warp .container .card .cart_block .list_cart .item_cart:hover .cart_body .right_info .title {
  color: #f1a039!important;
}

.page_cart .warp .container .card .cart_block .list_cart .item_cart .cart_body .right_info .bottom_price {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  flex-direction: row !important;
  align-items: center !important;
  height: 100% !important;
  margin-bottom: 0 !important;
  gap: 15px !important;
}

.page_cart .warp .container .card .cart_block .list_cart .item_cart .cart_body .right_info .bottom_price .price {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  height: 100% !important;
  font-family: "DIN-Bold", sans-serif !important;
  border-right: 1px dashed #eee !important;
  padding: 0 15px 0 0 !important;
}

.page_cart .warp .container .card .cart_block .list_cart .item_cart .cart_body .right_info .bottom_price .price span {
  font-size: 16px !important;
  margin: 3px 0 !important;
  transition: all 0.3s ease !important;
}

.page_cart .warp .container .card .cart_block .list_cart .item_cart .cart_body .right_info .bottom_price .price span:first-child {
  padding: 3px 15px !important;
  color: #fff !important;
  background: linear-gradient(90deg, #ff9500, #ffb700) !important;
  border-radius: 20px !important;
  box-shadow: 0 2px 8px rgba(255, 149, 0, 0.3) !important;
  font-size: 18px !important;
  display: inline-block !important;
}

.page_cart .warp .container .card .cart_block .list_cart .item_cart:hover .cart_body .right_info .bottom_price .price span:first-child {
  transform: scale(1.05) !important;
  box-shadow: 0 3px 10px rgba(255, 149, 0, 0.4) !important;
}

.page_cart .warp .container .card .cart_block .list_cart .item_cart .cart_body .right_info .bottom_price .price .price_ago {
  font-size: 14px !important;
  font-weight: normal !important;
  color: #999 !important;
  text-decoration: line-through !important;
}

.page_cart .warp .container .card .cart_block .list_cart .item_cart .cart_body .right_info .bottom_price .handle_num {
  justify-content: center !important;
  border-radius: 25px !important;
  overflow: hidden !important;
  display: flex !important;
  border: 1px solid #eee !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
  transition: all 0.3s ease !important;
  width: fit-content !important;
  margin: 0 auto !important;
}

.page_cart .warp .container .card .cart_block .list_cart .item_cart:hover .cart_body .right_info .bottom_price .handle_num {
  border-color: #f1a039!important;
}

.page_cart .warp .container .card .cart_block .list_cart .item_cart .cart_body .right_info .bottom_price .handle_num > div {
  margin-left: 0 !important;
}

.page_cart .warp .container .card .cart_block .list_cart .item_cart .cart_body .right_info .bottom_price .handle_num .num {
  border: none !important;
  color: #333 !important;
  width: 50px !important;
  text-align: center !important;
  font-weight: bold !important;
  background-color: #fff !important;
  font-size: 16px !important;
  line-height: 34px !important;
}

.page_cart .warp .container .card .cart_block .list_cart .item_cart .cart_body .right_info .bottom_price .handle_num .add, 
.page_cart .warp .container .card .cart_block .list_cart .item_cart .cart_body .right_info .bottom_price .handle_num .subtract {
  color: #666 !important;
  width: 34px !important;
  height: 34px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  background-color: #f9f9f9 !important;
  font-size: 18px !important;
}

.page_cart .warp .container .card .cart_block .list_cart .item_cart .cart_body .right_info .bottom_price .handle_num .add:hover, 
.page_cart .warp .container .card .cart_block .list_cart .item_cart .cart_body .right_info .bottom_price .handle_num .subtract:hover {
  background: #f1a039!important;
  color: #fff !important;
}

.page_cart .warp .container .card .cart_block .list_cart .item_cart .cart_body .right_info .bottom_price .handle_num .add {
  border-radius: 0 25px 25px 0 !important;
}

.page_cart .warp .container .card .cart_block .list_cart .item_cart .cart_body .right_info .bottom_price .handle_num .subtract {
  margin-left: 0 !important;
  border-radius: 25px 0 0 25px !important;
}

.page_cart .warp .container .card .cart_block .list_cart .item_cart .cart_body .right_info .btn_del {
  visibility: visible !important;
  opacity: 1 !important;
  position: absolute !important;
  right: 25px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  /* background-color: #fff !important; */
  color: #f1a039!important;
  border: 1px solid #f1a039!important;
  border-radius: 20px !important;
  /* padding: 6px 18px !important; */
  font-size: 14px !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
}

.page_cart .warp .container .card .cart_block .list_cart .item_cart .cart_body .right_info .btn_del:hover {
  background-color: #f1a039!important;
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(255, 149, 0, 0.3) !important;
}

.page_cart .warp .container .card .cart_block .bar_settle {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 18px 25px !important;
  height: auto !important;
  background: linear-gradient(to right, #fffaf0, #fff8e6) !important;
  border-radius: 12px !important;
  margin-bottom: 0 !important;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.03) !important;
  position: relative !important;
  overflow: hidden !important;
}

.page_cart .warp .container .card .cart_block .bar_settle::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  height: 100% !important;
  width: 5px !important;
  background: linear-gradient(to bottom, #ff9500, #ffb700) !important;
}

.page_cart .warp .container .card .cart_block .bar_settle .btn_settle {
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 140px !important;
  height: 44px !important;
  line-height: 44px !important;
  font-size: 16px !important;
  font-weight: bold !important;
  color: #fff !important;
  border-radius: 25px !important;
  background: linear-gradient(90deg, #ff9500, #ffb700) !important;
  text-align: center !important;
  box-shadow: 0 3px 10px rgba(255, 149, 0, 0.3) !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
}

.page_cart .warp .container .card .cart_block .bar_settle .btn_settle:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 5px 15px rgba(255, 149, 0, 0.4) !important;
}

.page_cart .warp .container .card .cart_block .bar_settle .btn_settle .sum_block {
  margin-right: 36px !important;
}

.page_cart .warp .container .card .cart_block .bar_settle .choose_btn {
  margin-right: 20px !important;
  font-size: 16px !important;
  display: flex !important;
  align-items: center !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}

.page_cart .warp .container .card .cart_block .bar_settle .choose_btn .btn_circle {
  width: 20px !important;
  height: 20px !important;
  border: 2px solid #ddd !important;
  border-radius: 50% !important;
  margin-right: 10px !important;
  transition: all 0.3s ease !important;
  position: relative !important;
}

.page_cart .warp .container .card .cart_block .bar_settle .choose_btn:hover .btn_circle {
  border-color: #f1a039!important;
}

.page_cart .warp .container .card .cart_block .bar_settle .choose_btn.active {
  color: #f1a039!important;
}

.page_cart .warp .container .card .cart_block .bar_settle .choose_btn.active .btn_circle {
  background: #f1a039!important;
  border-color: #f1a039!important;
}

.page_cart .warp .container .card .cart_block .bar_settle .choose_btn.active .btn_circle::after {
  content: "✓" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  color: white !important;
  font-size: 12px !important;
}

.page_cart .warp .container .card .cart_block .bar_settle .right_settle {
  flex: 1 !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  margin-right: 20px !important;
  justify-content: center !important;
}

.page_cart .warp .container .card .cart_block .bar_settle .right_settle .sum_block {
  display: flex !important;
  align-items: center !important;
}

.page_cart .warp .container .card .cart_block .bar_settle .right_settle .sum_block span:first-child {
  font-size: 0 !important;
}

.page_cart .warp .container .card .cart_block .bar_settle .right_settle .sum_block span:first-child:before {
  content: "Total：" !important;
  font-size: 16px !important;
  color: #666 !important;
}

.page_cart .warp .container .card .cart_block .bar_settle .right_settle .sum_block .sum {
  font-family: "DIN-Bold", sans-serif !important;
  font-size: 26px !important;
  font-weight: bold !important;
  color: #f1a039!important;
  margin-left: 5px !important;
  position: relative !important;
  display: inline-block !important;
}

.page_cart .warp .container .card .cart_block .bar_settle .right_settle .sum_block .sum::after {
  content: "" !important;
  position: absolute !important;
  bottom: -2px !important;
  left: 0 !important;
  width: 100% !important;
  height: 2px !important;
  background: linear-gradient(90deg, #ff9500, transparent) !important;
}





/* 我的订单&支付&优惠卷页面优化 */
#app .page_order {
  overflow: hidden !important;
  background: #f9f9f9 !important;
  position: relative !important;
  padding-bottom: 30px !important;
}

#app .page_order::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 6px !important;
  background: linear-gradient(90deg, #ff9500, #ffb700) !important;
}

#app .page_order .container {
  margin: 25px auto 80px !important;
  min-width: 500px !important;
  max-width: 1200px !important;
  background: #fff !important;
  border-radius: 15px !important;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05) !important;
  overflow: hidden !important;
  transition: all 0.3s ease !important;
  padding: 0 !important;
}

#app .page_order .container:hover {
  box-shadow: 0 8px 25px rgba(255, 149, 0, 0.15) !important;
  transform: translateY(-3px) !important;
}

#app .page_order .container .row {
  margin: 0 !important;
}

#app .page_order .container .row .col-10 {
  flex: 1 !important;
  max-width: 100% !important;
  padding: 0 !important;
}

#app .page_order .card_goods_list {
  position: relative !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

#app .page_order .card_goods_list > h4 {
  padding: 25px 30px !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  color: #333 !important;
  border-bottom: 1px solid #eee !important;
  position: relative !important;
  margin: 0 0 15px 0 !important;
  letter-spacing: 0.5px !important;
}

#app .page_order .card_goods_list > h4:after {
  content: " / My Order" !important;
  color: #fff !important;
  font-weight: 400 !important;
  font-style: italic !important;
}

#app .page_order .card_goods_list > h4::before {
  content: "📋" !important;
  margin-right: 10px !important;
}

#app .page_order .card_goods_list .filter_block {
  padding: 15px 25px !important;
  background: linear-gradient(to right, #fffaf0, #fff8e6) !important;
  margin: 0 20px 15px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  position: relative !important;
}

#app .page_order .card_goods_list .filter_block::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  height: 100% !important;
  width: 5px !important;
  background: linear-gradient(to bottom, #ff9500, #ffb700) !important;
  border-radius: 10px 0 0 10px !important;
}

#app .page_order .card_goods_list .filter_block .bar_sort {
  margin-left: 10px !important;
  display: flex !important;
  align-items: center !important;
}

#app .page_order .card_goods_list .filter_block .bar_sort select,
#app .page_order .card_goods_list .filter_block .bar_sort button {
  border-color: #f1a039!important;
  color: #f1a039!important;
  border-radius: 20px !important;
  transition: all 0.3s ease !important;
}

#app .page_order .card_goods_list .filter_block .bar_sort select:hover,
#app .page_order .card_goods_list .filter_block .bar_sort button:hover {
  background-color: #f1a039!important;
  color: #fff !important;
  box-shadow: 0 3px 10px rgba(255, 149, 0, 0.3) !important;
}

#app .page_order .card_goods_list .list_order {
  padding: 0 20px !important;
}

#app .page_order .card_goods_list .list_order .item_order {
  position: relative !important;
  display: flex !important;
  padding: 0 !important;
  margin: 20px 0 !important;
  padding-right: 90px !important;
  border: 1px solid #eee !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
}

#app .page_order .card_goods_list .list_order .item_order:hover {
  border-color: #f1a039!important;
  box-shadow: 0 5px 15px rgba(255, 149, 0, 0.1) !important;
  transform: translateY(-2px) !important;
}

#app .page_order .card_goods_list .list_order .item_order .state {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  min-width: 60px !important;
  min-height: 16px !important;
  padding: 50px 30px 5px 30px !important;
  background: linear-gradient(135deg, #ff9500, #ffb700) !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  transform: translate(50%, -50%) rotate(45deg) !important;
  line-height: 16px !important;
  text-align: center !important;
  box-shadow: 0 3px 10px rgba(255, 149, 0, 0.2) !important;
  z-index: 5 !important;
}

#app .page_order .card_goods_list .list_order .item_order .sum_price {
  flex-shrink: 0 !important;
  justify-content: center !important;
  width: 200px !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 20px 15px !important;
  background-color: #fffaf0 !important;
  position: relative !important;
  border-left: 1px dashed #eee !important;
}

#app .page_order .card_goods_list .list_order .item_order .sum_price::before {
  content: "Total" !important;
  display: block !important;
  font-size: 14px !important;
  color: #666 !important;
  margin-bottom: 5px !important;
}

#app .page_order .card_goods_list .list_order .item_order .sum_price span {
  color: #f1a039!important;
  font-weight: bold !important;
  font-size: 22px !important;
  font-family: "DIN-Bold", sans-serif !important;
  position: relative !important;
  display: inline-block !important;
}

#app .page_order .card_goods_list .list_order .item_order .sum_price span::after {
  content: "" !important;
  position: absolute !important;
  bottom: -2px !important;
  left: 0 !important;
  width: 100% !important;
  height: 2px !important;
  background: linear-gradient(90deg, #ff9500, transparent) !important;
}

#app .page_order .card_goods_list .list_order .item_order .sum_price .btn {
  visibility: visible !important;
  opacity: 1 !important;
  margin-top: 15px !important;
  background-color: #f1a039!important;
  color: #f1a039!important;
  border: 1px solid #f1a039!important;
  border-radius: 20px !important;
  padding: 6px 15px !important;
  font-size: 14px !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  font-weight: 500 !important;
  padding-left: 35px !important;
}


#app .page_order .card_goods_list .list_order .item_order:hover {
  background: #fffaf0 !important;
}

#app .page_order .card_goods_list .list_order .goods_list {
  flex: 1 !important;
  min-width: 0 !important;
}

#app .page_order .card_goods_list .list_order .goods_list .item_goods {
  border: none !important;
  position: relative !important;
  display: flex !important;
  justify-content: flex-start !important;
  min-height: 120px !important;
  padding: 10px !important;
  border-bottom: 1px dashed #eee !important;
}

#app .page_order .card_goods_list .list_order .goods_list .item_goods:last-child {
  border-bottom: none !important;
}

#app .page_order .card_goods_list .list_order .goods_list .item_goods .img_block {
  flex-shrink: 0 !important;
  box-sizing: content-box !important;
  width: 100px !important;
  height: 100px !important;
  /* padding: 15px 0 15px 15px !important; */
  position: relative !important;
  overflow: hidden !important;
}

#app .page_order .card_goods_list .list_order .goods_list .item_goods .img_block img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 10px !important;
  transition: all 0.5s ease !important;
  object-fit: cover !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1) !important;
}

#app .page_order .card_goods_list .list_order .goods_list .item_goods:hover .img_block img {
  transform: scale(1.05) !important;
}

#app .page_order .card_goods_list .list_order .goods_list .item_goods .img_block::after {
  content: "" !important;
  position: absolute !important;
  top: 15px !important;
  left: 15px !important;
  width: 100px !important;
  height: 100px !important;
  background: linear-gradient(135deg, rgba(255, 149, 0, 0.2), transparent 70%) !important;
  border-radius: 10px !important;
  pointer-events: none !important;
}

#app .page_order .card_goods_list .list_order .goods_list .item_goods .middle_info {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  width: auto !important;
  padding: 15px !important;
  overflow: hidden !important;
  border-right: 1px dashed #eee !important;
}

#app .page_order .card_goods_list .list_order .goods_list .item_goods .middle_info .title {
  display: block !important;
  font-size: 16px !important;
  font-weight: bold !important;
  color: #333 !important;
  width: 100% !important;
  transition: all 0.3s ease !important;
}

#app .page_order .card_goods_list .list_order .goods_list .item_goods:hover .middle_info .title {
  color: #f1a039!important;
}

#app .page_order .card_goods_list .list_order .goods_list .item_goods .middle_info .description {
  display: block !important;
  font-size: 14px !important;
  color: #8a929b !important;
  margin-top: 5px !important;
  width: 100% !important;
}

#app .page_order .card_goods_list .list_order .goods_list .item_goods .right_info {
  flex-shrink: 0 !important;
  width: 200px !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  border-right: 1px dashed #eee !important;
  padding: 0 15px !important;
}

#app .page_order .card_goods_list .list_order .goods_list .item_goods .right_info .price {
  padding: 3px 15px !important;
  font-family: "DIN-Bold", sans-serif !important;
  font-size: 16px !important;
  color: #fff !important;
  margin-right: 8px !important;
  background: linear-gradient(90deg, #ff9500, #ffb700) !important;
  border-radius: 20px !important;
  box-shadow: 0 2px 8px rgba(255, 149, 0, 0.3) !important;
  transition: all 0.3s ease !important;
}

#app .page_order .card_goods_list .list_order .goods_list .item_goods:hover .right_info .price {
  transform: scale(1.05) !important;
  box-shadow: 0 3px 10px rgba(255, 149, 0, 0.4) !important;
}

#app .page_order .card_goods_list .list_order .goods_list .item_goods .right_info .num {
  position: relative !important;
  top: 1px !important;
  margin-left: 2px !important;
  font-size: 15px !important;
  font-weight: normal !important;
  color: #666 !important;
}

#app .page_order .card_order {
  position: relative !important;
  background-color: #fff !important;
  border: 0 none !important;
  border-radius: 15px !important;
  margin: 25px 20px !important;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05) !important;
  overflow: hidden !important;
  transition: all 0.3s ease !important;
}

#app .page_order .card_order:hover {
  box-shadow: 0 8px 25px rgba(255, 149, 0, 0.15) !important;
  transform: translateY(-2px) !important;
}

#app .page_order .card_order .contact_info {
  position: relative !important;
  display: flex !important;
  justify-content: space-between !important;
  padding: 18px 15px 18px 80px !important;
  background: linear-gradient(to right, #fffaf0, #fff8e6) !important;
  border-bottom: 1px solid #eee !important;
}

#app .page_order .card_order .contact_info:before {
  content: "地址：" !important;
  position: absolute !important;
  top: 50% !important;
  left: 25px !important;
  height: 20px !important;
  margin-top: -10px !important;
  font-size: 16px !important;
  font-weight: bold !important;
  background-position: center !important;
  background-size: contain !important;
  color: #f1a039!important;
}

#app .page_order .card_order .contact_info::after {
  content: "📍" !important;
  position: absolute !important;
  top: 50% !important;
  left: 60px !important;
  transform: translateY(-50%) !important;
  font-size: 18px !important;
}

#app .page_order .card_order .contact_info .line_1 {
  order: 1 !important;
  margin: 0 10px 0 0 !important;
}

#app .page_order .card_order .contact_info .line_1 svg {
  display: none !important;
}

#app .page_order .card_order .contact_info .line_1 .name {
  font-weight: normal !important;
  padding-right: 0 !important;
  color: #333 !important;
}

#app .page_order .card_order .contact_info .line_2 {
  font-size: 16px !important;
  font-weight: 600 !important;
  margin-right: 10px !important;
  color: #333 !important;
}

#app .page_order .card_order .contact_info .line_2:before {
  font-size: 16px !important;
}

#app .page_order .card_order .goods_list {
  padding: 0 !important;
  box-sizing: border-box !important;
  margin-top: 20px !important;
  padding-right: 50% !important;
  border-bottom: 1px solid #eee !important;
  position: relative !important;
}

#app .page_order .card_order .goods_list::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  right: 50% !important;
  height: 100% !important;
  width: 1px !important;
  background: linear-gradient(to bottom, #eee, transparent) !important;
}

#app .page_order .card_order .goods_list .item_goods {
  padding-bottom: 22px !important;
  padding-left: 16px !important;
  border: 0 none !important;
  position: relative !important;
}

#app .page_order .card_order .goods_list .item_goods::before {
  content: "" !important;
  position: absolute !important;
  left: 16px !important;
  bottom: 11px !important;
  width: calc(100% - 32px) !important;
  height: 1px !important;
  background: linear-gradient(to right, #eee, transparent) !important;
}

#app .page_order .card_order .goods_list .item_goods:last-child::before {
  display: none !important;
}

#app .page_order .card_order .goods_list .item_goods .img_block {
  width: 100px !important;
  height: 100px !important;
  margin-right: 15px !important;
  position: relative !important;
  overflow: hidden !important;
}

#app .page_order .card_order .goods_list .item_goods .img_block img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 10px !important;
  transition: all 0.5s ease !important;
  object-fit: cover !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1) !important;
}

#app .page_order .card_order .goods_list .item_goods:hover .img_block img {
  transform: scale(1.05) !important;
}

#app .page_order .card_order .goods_list .item_goods .img_block::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(135deg, rgba(255, 149, 0, 0.2), transparent 70%) !important;
  border-radius: 10px !important;
  pointer-events: none !important;
}

#app .page_order .card_order .goods_list .item_goods .middle_info {
  display: flex !important;
  padding-top: 5px !important;
}

#app .page_order .card_order .goods_list .item_goods .middle_info .title {
  flex: 1 !important;
  min-width: 0 !important;
  display: block !important;
  font-size: 16px !important;
  color: #333 !important;
  width: 100% !important;
  transition: all 0.3s ease !important;
  font-weight: 500 !important;
}

#app .page_order .card_order .goods_list .item_goods:hover .middle_info .title {
  color: #f1a039!important;
}

#app .page_order .card_order .goods_list .item_goods .middle_info .priceAndNum {
  flex-shrink: 0 !important;
  margin-right: 20px !important;
  display: flex !important;
  align-items: center !important;
}

#app .page_order .card_order .goods_list .item_goods .middle_info .priceAndNum .price {
  font-family: "DIN-Bold", sans-serif !important;
  font-size: 18px !important;
  color: #f1a039!important;
  margin-right: 5px !important;
  position: relative !important;
  display: inline-block !important;
}

#app .page_order .card_order .goods_list .item_goods .middle_info .priceAndNum .price::after {
  content: "" !important;
  position: absolute !important;
  bottom: -2px !important;
  left: 0 !important;
  width: 100% !important;
  height: 1px !important;
  background: linear-gradient(90deg, #ff9500, transparent) !important;
}

#app .page_order .card_order .goods_list .item_goods .middle_info .priceAndNum .num {
  font-size: 16px !important;
  font-weight: normal !important;
  color: #666 !important;
}

#app .page_order .card_order .order_cli {
  position: relative !important;
  padding: 20px !important;
}

#app .page_order .card_order .sum_coupon {
  position: absolute !important;
  top: 20px !important;
  right: 20px !important;
  display: flex !important;
  align-items: center !important;
  padding: 8px 15px !important;
  border-radius: 30px !important;
  background: #fffaf0 !important;
  border: 1px dashed #f1a039!important;
  box-shadow: 0 2px 10px rgba(255, 149, 0, 0.1) !important;
  transition: all 0.3s ease !important;
}

#app .page_order .card_order .sum_coupon:hover {
  box-shadow: 0 4px 15px rgba(255, 149, 0, 0.15) !important;
}

#app .page_order .card_order .sum_coupon > div {
  font-size: 14px !important;
}

#app .page_order .card_order .sum_coupon > div:first-child {
  margin-right: 10px !important;
  color: #f1a039!important;
  font-weight: 500 !important;
}

#app .page_order .card_order .sum_coupon .el-select {
  margin-top: 0 !important;
}

#app .page_order .card_order .sum_coupon .el-select .el-input__inner {
  border-color: #f1a039!important;
  color: #f1a039!important;
}

#app .page_order .card_order .sum_price {
  position: absolute !important;
  top: 85px !important;
  right: 20px !important;
  justify-content: flex-start !important;
  padding: 0 !important;
  height: auto !important;
  font-size: 14px !important;
  border: none !important;
  background: none !important;
  display: flex !important;
  align-items: center !important;
}

#app .page_order .card_order .sum_price:nth-child(3) {
  right: 150px !important;
}
#app .page_order .card_order .sum_price:nth-child(4) {
  right: 250px !important;
}
#app .page_order .card_order .sum_price:nth-child(5) {
  right: 50px !important;
}

#app .page_order .card_order .sum_price > span:nth-child(1) {
  margin-right: 10px !important;
  color: #666 !important;
  font-weight: 500 !important;
}

#app .page_order .card_order .sum_price > span:nth-child(2) {
  font-size: 24px !important;
  color: #f1a039!important;
  font-family: "DIN-Bold", sans-serif !important;
  position: relative !important;
  display: inline-block !important;
}

#app .page_order .card_order .sum_price > span:nth-child(2)::after {
  content: "" !important;
  position: absolute !important;
  bottom: -2px !important;
  left: 0 !important;
  width: 100% !important;
  height: 2px !important;
  background: linear-gradient(90deg, #ff9500, transparent) !important;
}

#app .page_order .card_order .btn_block {
  position: absolute !important;
  top: 140px !important;
  right: 20px !important;
  padding: 10px 0 !important;
  margin-left: 10px !important;
  border: none !important;
}

#app .page_order .card_order .btn_block .btn_trade {
  width: 140px !important;
  background: linear-gradient(90deg, #ff9500, #ffb700) !important;
  border-color: #f1a039!important;
  color: #fff !important;
  height: 44px !important;
  line-height: 44px !important;
  padding: 0 !important;
  border-radius: 25px !important;
  border: none !important;
  font-weight: bold !important;
  font-size: 16px !important;
  box-shadow: 0 3px 10px rgba(255, 149, 0, 0.3) !important;
  transition: all 0.3s ease !important;
}

#app .page_order .card_order .btn_block .btn_trade:hover {
  opacity: 1 !important;
  color: #fff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 5px 15px rgba(255, 149, 0, 0.4) !important;
}

#app .page_order .card_order .bottom_order {
  display: flex !important;
  flex-direction: column-reverse !important;
  padding: 15px 20px !important;
  background-color: #fffaf0 !important;
  border-top: 1px solid #eee !important;
  position: relative !important;
}

#app .page_order .card_order .bottom_order::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  height: 100% !important;
  width: 5px !important;
  background: linear-gradient(to bottom, #ff9500, #ffb700) !important;
}

#app .page_order .card_order .bottom_order .flex_sbc {
  align-items: flex-start !important;
  margin-bottom: 8px !important;
}

#app .page_order .card_order .bottom_order .order_num {
  justify-content: flex-start !important;
  color: #666 !important;
  font-size: 14px !important;
  display: flex !important;
  align-items: center !important;
}

#app .page_order .card_order .bottom_order .order_num::before {
  content: "📝" !important;
  margin-right: 5px !important;
}

#app .page_order .card_order .bottom_order .time {
  justify-content: flex-start !important;
  border: 0 none !important;
  color: #666 !important;
  font-size: 14px !important;
  display: flex !important;
  align-items: center !important;
}

#app .page_order .card_order .bottom_order .time::before {
  content: "🕒" !important;
  margin-right: 5px !important;
}

#app .page_order .card_order .bottom_order .remark {
  justify-content: flex-start !important;
  border: 0 none !important;
  color: #666 !important;
  font-size: 14px !important;
  display: flex !important;
  align-items: center !important;
}

#app .page_order .card_order .bottom_order .remark::before {
  content: "📌" !important;
  margin-right: 5px !important;
}

#app .page_order .btn-secondary {
  background-color: transparent !important;
  border: none !important;
  color: #f1a039!important;
  transition: all 0.3s ease !important;
}

#app .page_order .btn-secondary:hover {
  color: #ffb700 !important;
  text-decoration: underline !important;
}

/* 支付页面样式 */
#app .page_pay {
  background-color: #f9f9f9 !important;
  padding-bottom: 30px !important;
  position: relative !important;
}

#app .page_pay::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 6px !important;
  background: linear-gradient(90deg, #ff9500, #ffb700) !important;
}

#app .page_pay .nav-tabs {
  justify-content: space-between !important;
  border-bottom: none !important;
  padding: 0 20px !important;
  margin-top: 25px !important;
}

#app .page_pay .nav-tabs .nav-item {
  flex: 1 !important;
  margin: 0 10px !important;
}

#app .page_pay .nav-tabs .nav-item .nav-link {
  border-radius: 10px !important;
  border: 1px solid #eee !important;
  padding: 15px !important;
  text-align: center !important;
  font-weight: 500 !important;
  transition: all 0.3s ease !important;
  background-color: #fff !important;
  color: #666 !important;
}

#app .page_pay .nav-tabs .nav-item .nav-link:hover {
  border-color: #f1a039!important;
}

#app .page_pay .nav-tabs .nav-item:nth-child(1) .nav-link.active {
  background: rgba(255, 149, 0, 0.1) !important;
  color: #f1a039!important;
  border-color: #f1a039!important;
  box-shadow: 0 3px 10px rgba(255, 149, 0, 0.1) !important;
}

#app .page_pay .nav-tabs .nav-item:nth-child(2) .nav-link.active {
  background: rgba(255, 149, 0, 0.1) !important;
  color: #f1a039!important;
  border-color: #f1a039!important;
  box-shadow: 0 3px 10px rgba(255, 149, 0, 0.1) !important;
}

#app .page_pay .nav-tabs .nav-item:nth-child(3) .nav-link.active {
  background: rgba(255, 149, 0, 0.1) !important;
  color: #f1a039!important;
  border-color: #f1a039!important;
  box-shadow: 0 3px 10px rgba(255, 149, 0, 0.1) !important;
}

#app .page_pay .card {
  border-radius: 15px !important;
  border: 0 none !important;
  margin-top: 20px !important;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05) !important;
  overflow: hidden !important;
  transition: all 0.3s ease !important;
}

#app .page_pay .card:hover {
  box-shadow: 0 8px 25px rgba(255, 149, 0, 0.15) !important;
  transform: translateY(-3px) !important;
}

#app .page_pay .card .card-header {
  background: linear-gradient(to right, #fffaf0, #fff8e6) !important;
  padding: 20px !important;
  border-bottom: 1px solid #eee !important;
  position: relative !important;
}

#app .page_pay .card .card-header::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  height: 100% !important;
  width: 5px !important;
  background: linear-gradient(to bottom, #ff9500, #ffb700) !important;
}

#app .page_pay .card .card-header .text-center {
  margin: 0 !important;
  color: #333 !important;
  font-size: 20px !important;
  font-weight: 600 !important;
}

#app .page_pay .card .card-header .text-center::before {
  content: "💳" !important;
  margin-right: 10px !important;
}

#app .page_pay .card .card-body {
  padding: 30px !important;
}

#app .page_pay .card .card-body .tabs .tab-content .tab-pane:nth-child(1) .row .col, 
#app .page_pay .card .card-body .tabs .tab-content .tab-pane:nth-child(2) .row .col {
  text-align: center !important;
}

#app .page_pay .card .card-body .tabs .tab-content .tab-pane input {
  width: 366px !important;
  height: 45px !important;
  padding-left: 15px !important;
  border: 0 none !important;
  border-radius: 25px !important;
  border: 2px solid #f1a039!important;
  background-color: #fffaf0 !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 2px 10px rgba(255, 149, 0, 0.1) !important;
  font-size: 16px !important;
  color: #333 !important;
}

#app .page_pay .card .card-body .tabs .tab-content .tab-pane input:focus {
  outline: none !important;
  box-shadow: 0 4px 15px rgba(255, 149, 0, 0.2) !important;
}

#app .page_pay .card .card-body .tabs .tab-content .tab-pane input::placeholder {
  color: #999 !important;
}

#app .page_pay .card .card-body .card-footer {
  background: none !important;
  padding: 20px 0 10px !important;
  margin-top: 40px !important;
  border-top: none !important;
  text-align: center !important;
}

#app .page_pay .card .card-body .card-footer .btn {
  width: 200px !important;
  margin: 0 auto !important;
  font-weight: bold !important;
  background: linear-gradient(90deg, #ff9500, #ffb700) !important;
  border-color: #f1a039!important;
  color: #fff !important;
  height: 50px !important;
  line-height: 38px !important;
  border-radius: 25px !important;
  font-size: 18px !important;
  box-shadow: 0 3px 10px rgba(255, 149, 0, 0.3) !important;
  transition: all 0.3s ease !important;
}

#app .page_pay .card .card-body .card-footer .btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 5px 15px rgba(255, 149, 0, 0.4) !important;
}

#app .page_pay .coupon_box {
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
  height: auto !important;
  background: #fff !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.05) !important;
  margin: 20px 0 !important;
  border: 1px dashed #f1a039!important;
  transition: all 0.3s ease !important;
}

#app .page_pay .coupon_box:hover {
  box-shadow: 0 5px 20px rgba(255, 149, 0, 0.15) !important;
  transform: translateY(-2px) !important;
}

#app .page_pay .coupon_box > div {
  margin: 0 !important;
}

#app .page_pay .coupon_box > div:first-child {
  flex: 1 !important;
  min-width: 0 !important;
  padding: 15px 20px !important;
  color: #333 !important;
  background-color: #fffaf0 !important;
  border-radius: 10px 0 0 10px !important;
  position: relative !important;
}

#app .page_pay .coupon_box > div:first-child::after {
  content: "" !important;
  position: absolute !important;
  right: 0 !important;
  top: 0 !important;
  height: 100% !important;
  width: 10px !important;
  background: repeating-linear-gradient(
    0deg,
    #fff,
    #fff 5px,
    transparent 5px,
    transparent 10px
  ) !important;
}

#app .page_pay .coupon_box > div:first-child > div:first-child {
  font-size: 18px !important;
  font-weight: 600 !important;
  color: #f1a039!important;
  margin-bottom: 5px !important;
}

#app .page_pay .coupon_box > div:first-child > div:not(:first-child) {
  font-size: 14px !important;
  color: #666 !important;
}

#app .page_pay .coupon_box > div:nth-child(2) {
  padding: 15px 20px !important;
  background-color: #f1a039!important;
  display: flex !important;
  align-items: center !important;
}

#app .page_pay .coupon_box button {
  margin-left: 10px !important;
  min-width: 100px !important;
  background: #fff !important;
  color: #f1a039!important;
  border: none !important;
  border-radius: 20px !important;
  padding: 8px 15px !important;
  font-weight: 500 !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

#app .page_pay .coupon_box button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}


.goods_list .img_block{
  padding: 0rem !important;
}








/* 登录页面样式重构 */
#app .page_account {
  position: relative !important;
  min-height: 640px !important;
  padding: 40px 0 100px !important;
  background-image: url("../img/bg.jpg") !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

#app .page_account::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(135deg, rgba(255, 149, 0, 0.2), rgba(255, 200, 100, 0.1)) !important;
  z-index: 1 !important;
}


#app .page_account .row_login,
#app .page_account .row_registers,
#app .page_account .row_forgot {
  position: relative !important;
  box-sizing: border-box !important;
  min-width: 500px !important;
  min-height: 230px !important;
  margin: 0 auto !important;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(255, 245, 235, 0.85) 100%
  ) !important;
  border: 0 none !important;
  border-radius: 20px !important;
  box-shadow: 
    0 15px 35px rgba(0, 0, 0, 0.1),
    0 5px 15px rgba(255, 149, 0, 0.2),
    inset 0 0 15px rgba(255, 255, 255, 0.5) !important;
  backdrop-filter: blur(10px) !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  z-index: 10 !important;
  max-width: 600px !important;
  width: 90% !important;
}


#app .page_account .row_login:hover,
#app .page_account .row_registers:hover,
#app .page_account .row_forgot:hover {
  transform: translateY(-5px) !important;
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.15),
    0 10px 20px rgba(255, 149, 0, 0.25),
    inset 0 0 20px rgba(255, 255, 255, 0.6) !important;
}

#app .page_account .form_box {
  flex-direction: column !important;
  position: relative !important;
  z-index: 5 !important;
}

#app .page_account .form_box::before {
  content: "👋" !important;
  position: absolute !important;
  top: 20px !important;
  left: 30px !important;
  font-size: 28px !important;
  opacity: 0.8 !important;
}

#app .page_account .form_box .forms {
  width: auto !important;
  padding: 40px 40px 30px 20px !important;
  background: none !important;
  position: relative !important;
}

#app .page_account .form_box .forms::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 80% !important;
  height: 1px !important;
  background: linear-gradient(to right, transparent, rgba(255, 149, 0, 0.3), transparent) !important;
}

#app .page_account .form_box .forms .form-group {
  display: flex !important;
  align-items: flex-start !important;
  margin-bottom: 20px !important;
  position: relative !important;
}

#app .page_account .form_box .forms .form-group::before {
  content: "" !important;
  position: absolute !important;
  left: 80px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 1px !important;
  height: 70% !important;
  background: linear-gradient(to bottom, transparent, rgba(255, 149, 0, 0.3), transparent) !important;
}

#app .page_account .form_box .forms .form-group label {
  flex-shrink: 0 !important;
  width: 80px !important;
  min-width: 80px !important;
  text-align: right !important;
  margin-bottom: 0 !important;
  padding: 15px 15px 15px 0 !important;
  font-size: 15px !important;
  line-height: 24px !important;
  color: #333 !important;
  font-weight: 500 !important;
  transition: all 0.3s ease !important;
}

#app .page_account .form_box .forms .form-group:hover label {
  color: #f1a039!important;
}

#app .page_account .form_box .forms .form-group > div {
  flex: 1 !important;
  min-width: 0 !important;
}

#app .page_account .form_box .forms .form-group.diy_fg div:nth-child(1) {
  flex: none !important;
  flex-shrink: 0 !important;
  width: 80px !important;
  min-width: 80px !important;
  text-align: right !important;
  margin-bottom: 0 !important;
  padding: 15px 15px 15px 0 !important;
  font-size: 15px !important;
  line-height: 24px !important;
  color: #333 !important;
  font-weight: 500 !important;
}

#app .page_account .form_box .forms .form-group.diy_fg:hover div:nth-child(1) {
  color: #f1a039!important;
}

#app .page_account .form_box .forms .form-group .input-group-append button {
  padding: 0 20px !important;
  margin-left: 15px !important;
  font-size: 14px !important;
  line-height: 36px !important;
  height: 36px !important;
  background: linear-gradient(90deg, #ff9500, #ffb700) !important;
  border: none !important;
  border-radius: 18px !important;
  color: #fff !important;
  font-weight: 500 !important;
  box-shadow: 0 3px 10px rgba(255, 149, 0, 0.3) !important;
  transition: all 0.3s ease !important;
}

#app .page_account .form_box .forms .form-group .input-group-append button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 5px 15px rgba(255, 149, 0, 0.4) !important;
}

#app .page_account .form_box .forms .geetest_box {
  display: flex !important;
  flex-direction: row !important;
  width: auto !important;
  margin-bottom: 0 !important;
  position: relative !important;
}

#app .page_account .form_box .forms .geetest_box::before {
  content: "" !important;
  position: absolute !important;
  left: 80px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 1px !important;
  height: 70% !important;
  background: linear-gradient(to bottom, transparent, rgba(255, 149, 0, 0.3), transparent) !important;
}

#app .page_account .form_box .forms .geetest_box .geetest_box_title {
  display: block !important;
  width: 80px !important;
  min-width: 80px !important;
  text-align: right !important;
  margin-bottom: 0 !important;
  padding: 15px 15px 15px 0 !important;
  font-size: 15px !important;
  line-height: 24px !important;
  color: #333 !important;
  font-weight: 500 !important;
  transition: all 0.3s ease !important;
}

#app .page_account .form_box .forms .geetest_box:hover .geetest_box_title {
  color: #f1a039!important;
}

#app .page_account .form_box .forms .geetest_box .geetest_box_content {
  flex: 1 !important;
  min-width: 0 !important;
  margin-left: 0 !important;
}

#app .page_account .form_box .forms .geetest_box .geetest_box_content .el-input {
  margin-left: 0 !important;
  margin-right: 15px !important;
}

#app .page_account .form_box .forms .geetest_box .geetest_box_content canvas {
  height: auto !important;
  border-radius: 8px !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1) !important;
}

#app .page_account .form_box .forms .geetest_box .geetest_box_content .slide-picture {
  background: #f5f5f5 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

#app .page_account .form_box .forms input, 
#app .page_account .form_box .forms textarea {
  padding: 12px 20px !important;
  border-radius: 25px !important;
  transition: all 0.3s ease !important;
}


#app .page_account .form_box .forms input, 
#app .page_account .form_box .forms select {
  height: 52px !important;
  margin-top: 0 !important;
  font-size: 15px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  border: 2px solid rgba(255, 149, 0, 0.2) !important;
  border-radius: 26px !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
  /* padding: 0 20px !important; */
  color: #333 !important;
  transition: all 0.3s ease !important;
}

#app .page_account .form_box .forms input:hover, 
#app .page_account .form_box .forms select:hover {
  border-color: rgba(255, 149, 0, 0.5) !important;
  box-shadow: 0 3px 15px rgba(255, 149, 0, 0.15) !important;
}

#app .page_account .form_box .forms input:focus, 
#app .page_account .form_box .forms select:focus {
  border-color: #f1a039!important;
  box-shadow: 0 3px 15px rgba(255, 149, 0, 0.2) !important;
  outline: none !important;
}

#app .page_account .form_box .forms input::-moz-placeholder, 
#app .page_account .form_box .forms select::-moz-placeholder {
  font-size: 14px !important;
  color: #999 !important;
}

#app .page_account .form_box .forms input::placeholder, 
#app .page_account .form_box .forms select::placeholder {
  font-size: 14px !important;
  color: #999 !important;
}

#app .page_account .form_box .btns_bottom {
  width: auto !important;
  padding: 0 10px 90px !important;
  background: none !important;
  text-align: center !important;
  position: relative !important;
}

#app .page_account .form_box .btns_bottom button {
  font-size: 16px !important;
  text-align: center !important;
  padding: 0 10px !important;
  border: none !important;
}

#app .page_account .form_box .btns_bottom .btn_item {
  display: block !important;
  flex: 1 !important;
  width: 50% !important;
  height: 52px !important;
  margin: 0 auto !important;
  line-height: 52px !important;
  font-size: 16px !important;
  font-weight: bold !important;
  border-radius: 26px !important;
  background: linear-gradient(90deg, #ff9500, #ffb700) !important;
  color: #fff !important;
  box-shadow: 0 5px 15px rgba(255, 149, 0, 0.3) !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.3s ease !important;
  z-index: 1 !important;
}

#app .page_account .form_box .btns_bottom .btn_item::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.2), transparent) !important;
  transition: all 0.5s ease !important;
  z-index: -1 !important;
}

#app .page_account .form_box .btns_bottom .btn_item:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 20px rgba(255, 149, 0, 0.4) !important;
}

#app .page_account .form_box .btns_bottom .btn_item:hover::before {
  left: 100% !important;
}

#app .page_account .form_box .btns_bottom .btn_item span {
  font-size: 16px !important;
  font-weight: bold !important;
  color: #fff !important;
}

#app .page_account .form_box .btns_bottom .forgot_nav, 
#app .page_account .form_box .btns_bottom .btn_register, 
#app .page_account .form_box .btns_bottom .btn_login {
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 20px !important;
  color: #f1a039!important;
  z-index: 999 !important;
  position: relative !important;
  transition: all 0.3s ease !important;
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#app .page_account .form_box .btns_bottom .forgot_nav span, 
#app .page_account .form_box .btns_bottom .btn_register span, 
#app .page_account .form_box .btns_bottom .btn_login span {
  color: #f1a039!important;
  position: relative !important;
  transition: all 0.3s ease !important;
}

#app .page_account .form_box .btns_bottom .forgot_nav span::after, 
#app .page_account .form_box .btns_bottom .btn_register span::after, 
#app .page_account .form_box .btns_bottom .btn_login span::after {
  content: "" !important;
  position: absolute !important;
  bottom: -2px !important;
  left: 0 !important;
  width: 100% !important;
  height: 1px !important;
  background-color: #f1a039!important;
  transition: all 0.3s ease !important;
}

#app .page_account .form_box .btns_bottom .forgot_nav:hover span, 
#app .page_account .form_box .btns_bottom .btn_register:hover span, 
#app .page_account .form_box .btns_bottom .btn_login:hover span {
  color: #ffb700 !important;
}

#app .page_account .form_box .btns_bottom .forgot_nav:hover span::after, 
#app .page_account .form_box .btns_bottom .btn_register:hover span::after, 
#app .page_account .form_box .btns_bottom .btn_login:hover span::after {
  background-color: #ffb700 !important;
  height: 2px !important;
}

#app .page_account .form_box .btns_bottom .btn_register, 
#app .page_account .form_box .btns_bottom .login_bt, 
#app .page_account .form_box .btns_bottom .btn_login, 
#app .page_account .form_box .btns_bottom .forgot_nav {
  position: absolute !important;
  top: auto !important;
  bottom: 50px !important;
  left: 40px !important;
  height: auto !important;
  padding: 0 !important;
  font-size: 15px !important;
  color: #f1a039!important;
  text-decoration: none !important;
  border: 0 none !important;
  outline: none !important;
  z-index: 999 !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
}

#app .page_account .form_box .btns_bottom .btn_register::before, 
#app .page_account .form_box .btns_bottom .login_bt::before, 
#app .page_account .form_box .btns_bottom .btn_login::before, 
#app .page_account .form_box .btns_bottom .forgot_nav::before {
  content: "👉" !important;
  margin-right: 5px !important;
  font-size: 16px !important;
  transition: all 0.3s ease !important;
}

#app .page_account .form_box .btns_bottom .btn_register:hover::before, 
#app .page_account .form_box .btns_bottom .login_bt:hover::before, 
#app .page_account .form_box .btns_bottom .btn_login:hover::before, 
#app .page_account .form_box .btns_bottom .forgot_nav:hover::before {
  transform: translateX(3px) !important;
}

#app .page_account .form_box .btns_bottom .btn_register span, 
#app .page_account .form_box .btns_bottom .login_bt span, 
#app .page_account .form_box .btns_bottom .btn_login span, 
#app .page_account .form_box .btns_bottom .forgot_nav span {
  font-weight: bold !important;
  color: #f1a039!important;
  text-decoration: underline !important;
}

#app .page_account .form_box .btns_bottom .login_bt span {
  font-size: 15px !important;
}

#app .page_account .form_box .btns_bottom .btn_login {
  color: #f1a039!important;
}

#app .page_account .form_box .btns_bottom .forgot_nav {
  left: 290px !important;
  margin: 0 !important;
  order: 2 !important;
}

#app .page_account .warp .container .row .more_nav .btn_item {
  background: linear-gradient(90deg, #ff9500, #ffb700) !important;
  border-radius: 25px !important;
  height: 44px !important;
  line-height: 44px !important;
  margin-bottom: 16px !important;
  color: #fff !important;
  font-weight: 500 !important;
  box-shadow: 0 3px 10px rgba(255, 149, 0, 0.3) !important;
  transition: all 0.3s ease !important;
}

#app .page_account .warp .container .row .more_nav .btn_item:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 5px 15px rgba(255, 149, 0, 0.4) !important;
}

.form_register {
  width: 100% !important;
  padding: 0px !important;
}

.face-login {
  position: absolute !important;
  left: 50% !important;
  top: 10px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  padding: 15px 20px !important;
  text-align: center !important;
  width: 280px !important;
  margin-left: -140px !important;
  border-radius: 0 0 15px 15px !important;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1) !important;
  backdrop-filter: blur(5px) !important;
  border: 1px solid rgba(255, 149, 0, 0.2) !important;
  border-top: none !important;
  z-index: 100 !important;
  transition: all 0.3s ease !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.face-login:hover {
  box-shadow: 0 8px 20px rgba(255, 149, 0, 0.2) !important;
}

.face-login > button {
  width: 90px !important;
  margin: 0 !important;
  background: #fff !important;
  border: 1px solid rgba(255, 149, 0, 0.3) !important;
  color: #f1a039!important;
  transition: all 0.3s ease !important;
  height: 36px !important;
  line-height: 34px !important;
  padding: 0 !important;
}

.face-login > button:first-child {
  border-radius: 18px 0 0 18px !important;
}

.face-login > button:nth-child(2) {
  margin-left: -1px !important;
  border-radius: 0 18px 18px 0 !important;
}

.face-login > button:hover {
  z-index: 1 !important;
  color: #fff !important;
  background-color: #f1a039!important;
  border-color: #f1a039!important;
  box-shadow: 0 3px 10px rgba(255, 149, 0, 0.3) !important;
}

.face-login .el-button {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.face-login .face-img {
  margin-top: 15px !important;
}

.face-login .face-img .el-upload-dragger {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  background: rgba(255, 255, 255, 0.8) !important;
  border: 2px dashed rgba(255, 149, 0, 0.3) !important;
  border-radius: 10px !important;
  transition: all 0.3s ease !important;
}

.face-login .face-img .el-upload-dragger:hover {
  border-color: #f1a039!important;
  background: rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 3px 10px rgba(255, 149, 0, 0.2) !important;
}

.face-login .face-img .el-upload-dragger .avatar-uploader-icon {
  font-size: 40px !important;
  color: #f1a039!important;
}

.face-login .face-img .el-upload-dragger .avatar {
  object-fit: contain !important;
  border-radius: 8px !important;
}

.face-login .face-img .el-button {
  min-width: 120px !important;
  margin-bottom: 10px !important;
  padding: 0 20px !important;
  font-size: 16px !important;
  color: #fff !important;
  border: 0 none !important;
  background: linear-gradient(90deg, #ff9500, #ffb700) !important;
  border-radius: 20px !important;
  height: 40px !important;
  line-height: 40px !important;
  box-shadow: 0 3px 10px rgba(255, 149, 0, 0.3) !important;
  transition: all 0.3s ease !important;
}

.face-login .face-img .el-button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 5px 15px rgba(255, 149, 0, 0.4) !important;
}

.face-login .face-camera {
  width: 260px !important;
  margin-top: 15px !important;
}

.face-login .face-camera canvas, 
.face-login .face-camera video {
  width: 240px !important;
  height: 160px !important;
  border: 2px solid rgba(255, 149, 0, 0.3) !important;
  border-radius: 10px !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1) !important;
  transition: all 0.3s ease !important;
}

.face-login .face-camera canvas:hover, 
.face-login .face-camera video:hover {
  border-color: #f1a039!important;
  box-shadow: 0 5px 15px rgba(255, 149, 0, 0.2) !important;
}

.el-col-8 {
  width: 100% !important;
}

.form_editor {
  padding-top: 1px !important;
}

.input-group{
  align-items: center !important;
}


/* 修改收货地址页面重构 */
#app .address_edit {
  position: relative !important;
  padding: 30px 0 !important;
  background: linear-gradient(135deg, rgba(255, 249, 240, 0.8), rgba(255, 255, 255, 0.9)) !important;
}

#app .address_edit::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 6px !important;
  background: linear-gradient(90deg, #ff9500, #ffb700) !important;
  z-index: 1 !important;
}

#app .address_edit .form_address {
  padding: 40px !important;
  min-height: auto !important;
  background-color: rgba(255,149,0,0.3) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
  border-radius: 15px !important;
  position: relative !important;
  max-width: 800px !important;
  margin: 20px auto !important;
  transition: all 0.3s ease !important;
  border: 1px solid rgba(255, 149, 0, 0.1) !important;
  overflow: hidden !important;
}

#app .address_edit .form_address:hover {
  box-shadow: 0 15px 40px rgba(255, 149, 0, 0.15) !important;
  transform: translateY(-5px) !important;
}

#app .address_edit .form_address::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  width: 150px !important;
  height: 150px !important;
  background: linear-gradient(135deg, #ff7200, #ff9500) !important;
  border-radius: 0 0 0 100% !important;
  z-index: 0 !important;
}

#app .address_edit .form_address > div {
  border-bottom: 0 none !important;
  position: relative !important;
  z-index: 1 !important;
}

#app .address_edit .form_address .header {
  font-size: 0 !important;
  color: #333 !important;
  font-weight: 600 !important;
  border-bottom: 0 none !important;
  position: relative !important;
  margin-bottom: 30px !important;
  padding-bottom: 15px !important;
}

#app .address_edit .form_address .header:before {
  content: "Edit Address" !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  color: #333 !important;
  position: relative !important;
  display: inline-block !important;
}

#app .address_edit .form_address .header::before {
  content: "📍 Edit Address" !important;
}

#app .address_edit .form_address .justify-content-between {
  display: block !important;
}

#app .address_edit .form_address .justify-content-between .col-3 {
  width: auto !important;
  max-width: none !important;
}

#app .address_edit .form_address .card_menu_box {
  position: relative !important;
  padding: 20px !important;
  background: rgba(255, 249, 240, 0.5) !important;
  border-radius: 12px !important;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.03) !important;
}

#app .address_edit .form_address .card_menu_box::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  height: 100% !important;
  width: 4px !important;
  background: linear-gradient(to bottom, #ff9500, #ffb700) !important;
  border-radius: 4px 0 0 4px !important;
}

#app .address_edit .form_address .card_menu_box .name, 
#app .address_edit .form_address .card_menu_box .phone, 
#app .address_edit .form_address .card_menu_box .address {
  display: flex !important;
  margin-bottom: 20px !important;
  position: relative !important;
}

#app .address_edit .form_address .card_menu_box .name::before,
#app .address_edit .form_address .card_menu_box .phone::before,
#app .address_edit .form_address .card_menu_box .address::before {
  content: "" !important;
  position: absolute !important;
  left: 80px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 1px !important;
  height: 70% !important;
  background: linear-gradient(to bottom, transparent, rgba(255, 149, 0, 0.3), transparent) !important;
}

#app .address_edit .form_address .card_menu_box .name span, 
#app .address_edit .form_address .card_menu_box .phone span, 
#app .address_edit .form_address .card_menu_box .address span {
  flex-shrink: 0 !important;
  width: 80px !important;
  padding-right: 15px !important;
  text-align: right !important;
  font-size: 15px !important;
  line-height: 52px !important;
  color: #333 !important;
  font-weight: 500 !important;
  transition: all 0.3s ease !important;
}

#app .address_edit .form_address .card_menu_box .name:hover span, 
#app .address_edit .form_address .card_menu_box .phone:hover span, 
#app .address_edit .form_address .card_menu_box .address:hover span {
  color: #f1a039!important;
}

#app .address_edit .form_address .card_menu_box .name input, 
#app .address_edit .form_address .card_menu_box .name textarea, 
#app .address_edit .form_address .card_menu_box .phone input, 
#app .address_edit .form_address .card_menu_box .phone textarea, 
#app .address_edit .form_address .card_menu_box .address input, 
#app .address_edit .form_address .card_menu_box .address textarea {
  margin-left: 0 !important;
  border: 2px solid rgba(255, 149, 0, 0.2) !important;
  border-radius: 26px !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
  padding: 10px 20px !important;
  font-size: 15px !important;
  color: #333 !important;
  background: rgba(255, 255, 255, 0.9) !important;
  transition: all 0.3s ease !important;
  height: 52px !important;
}

#app .address_edit .form_address .card_menu_box .name input:hover, 
#app .address_edit .form_address .card_menu_box .name textarea:hover, 
#app .address_edit .form_address .card_menu_box .phone input:hover, 
#app .address_edit .form_address .card_menu_box .phone textarea:hover, 
#app .address_edit .form_address .card_menu_box .address input:hover, 
#app .address_edit .form_address .card_menu_box .address textarea:hover {
  border-color: rgba(255, 149, 0, 0.5) !important;
  box-shadow: 0 3px 15px rgba(255, 149, 0, 0.1) !important;
}

#app .address_edit .form_address .card_menu_box .name input:focus, 
#app .address_edit .form_address .card_menu_box .name textarea:focus, 
#app .address_edit .form_address .card_menu_box .phone input:focus, 
#app .address_edit .form_address .card_menu_box .phone textarea:focus, 
#app .address_edit .form_address .card_menu_box .address input:focus, 
#app .address_edit .form_address .card_menu_box .address textarea:focus {
  border-color: #f1a039!important;
  box-shadow: 0 3px 15px rgba(255, 149, 0, 0.15) !important;
  outline: none !important;
}

#app .address_edit .form_address .card_menu_box .name input::placeholder, 
#app .address_edit .form_address .card_menu_box .name textarea::placeholder, 
#app .address_edit .form_address .card_menu_box .phone input::placeholder, 
#app .address_edit .form_address .card_menu_box .phone textarea::placeholder, 
#app .address_edit .form_address .card_menu_box .address input::placeholder, 
#app .address_edit .form_address .card_menu_box .address textarea::placeholder {
  color: #999 !important;
  font-size: 14px !important;
}

#app .address_edit .form_address .card_menu_box .address {
  align-items: flex-start !important;
}

#app .address_edit .form_address .card_menu_box .address span {
  line-height: 38px !important;
}

#app .address_edit .form_address .card_menu_box .address textarea {
  min-height: 100px !important;
  border-radius: 15px !important;
  padding: 15px 20px !important;
  line-height: 1.5 !important;
  resize: vertical !important;
}

#app .address_edit .form_address .btn_save {
  display: block !important;
  width: 200px !important;
  margin: 30px auto 10px !important;
  height: 52px !important;
  font-size: 16px !important;
  line-height: 52px !important;
  font-weight: bold !important;
  background: linear-gradient(90deg, #ff9500, #ffb700) !important;
  border: none !important;
  color: #fff !important;
  border-radius: 26px !important;
  box-shadow: 0 5px 15px rgba(255, 149, 0, 0.3) !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  overflow: hidden !important;
  text-align: center !important;
  padding: 0 !important;
}

#app .address_edit .form_address .btn_save::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.2), transparent) !important;
  transition: all 0.5s ease !important;
}

#app .address_edit .form_address .btn_save:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 20px rgba(255, 149, 0, 0.4) !important;
}

#app .address_edit .form_address .btn_save:hover::before {
  left: 100% !important;
}

/* 添加动画效果 */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

#app .address_edit .form_address .header {
  animation: fadeIn 0.5s ease-out forwards !important;
}

#app .address_edit .form_address .card_menu_box {
  animation: fadeIn 0.5s ease-out 0.2s forwards !important;
}

#app .address_edit .form_address .btn_save {
  animation: fadeIn 0.5s ease-out 0.4s forwards !important;
}



input[type=checkbox]:checked, input[type=radio]:checked{
  background-color: #f1a039!important;
}

/* .page_user .justify-content-between > .col-md-9{
  margin: auto !important;
} */


#app .support_entry {
  border-radius: 100%;
  border: none;
  /* background: linear-gradient(135deg, #ff9500, #ff7200); */
  box-shadow: 
    0 6px 16px rgba(255, 114, 0, 0.25),
    0 0 0 8px rgba(255, 114, 0, 0.05),
    0 0 0 0 rgba(255, 114, 0, 0.2);
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: fixed;
  right: 30px;
  bottom: 30px;
  top: auto;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 999;
  animation: supportEntryFloat 3s infinite ease-in-out;
  overflow: visible;
}


/* 客服入口 */
#app .support_entry::before {
  content: "";
  position: absolute;
  inset: -8px;
  border: 1px solid rgba(255, 114, 0, 0.3);
  border-radius: 50%;
  animation: supportPulse 2s infinite;
}


#app .support_entry::after {
  content: "?";
  font-size: 28px;
  font-weight: bold;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: relative;
  top: -2px;
}


#app .support_entry:hover {
  transform: translateY(-5px) scale(1.05);
  box-shadow: 
    0 10px 25px rgba(255, 114, 0, 0.35),
    0 0 0 12px rgba(255, 114, 0, 0.08),
    0 0 0 22px rgba(255, 114, 0, 0.02);
}


#app .support_entry:active {
  transform: scale(0.95);
  box-shadow: 0 4px 10px rgba(255, 114, 0, 0.2);
  transition: all 0.1s ease;
}


@keyframes supportEntryFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

@keyframes supportPulse {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.5); opacity: 0; }
}


/* Enhanced Robotic Assistant Button - Theme-Matched */
.robotic {
  top: auto !important;
  left: 20px !important;
  bottom: 100px !important;
  right: 0 !important;
  width: 60px !important;
  height: 60px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, #ff9500, #e67e00) !important;
  border-radius: 50% 50% 50% 50% !important;
  box-shadow: 
    -2px 6px 16px rgba(255, 149, 0, 0.25),
    0 0 0 0 rgba(255, 149, 0, 0.5) !important;
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
  z-index: 998 !important;
  transform-origin: right center !important;
  border-left: 3px solid rgba(255, 255, 255, 0.2) !important;
  overflow: hidden !important;
}


/* Hover state */
.robotic:hover {
  transform: translateX(-8px) scale(1.1) !important;
  width: 65px !important;
  box-shadow: 
    -5px 8px 20px rgba(255, 149, 0, 0.35),
    0 0 0 8px rgba(255, 149, 0, 0.08) !important;
}

.robotic:hover::before {
  transform: scale(1.2) !important;
  animation: roboticPulse 2s infinite alternate !important;
}

.robotic:hover::after {
  opacity: 1 !important;
  animation: roboticSparkle 3s infinite linear !important;
}

/* Active state */
.robotic:active {
  transform: translateX(-3px) scale(0.95) !important;
  box-shadow: -2px 4px 8px rgba(255, 149, 0, 0.2) !important;
  transition: all 0.1s ease !important;
}

/* Animation keyframes */
@keyframes roboticPulse {
  0%, 100% { transform: scale(1.1); }
  50% { transform: scale(1.2); }
}

@keyframes roboticSparkle {
  0% { transform: translateY(0) rotate(0deg); }
  25% { transform: translateY(-3px) rotate(5deg); }
  50% { transform: translateY(0) rotate(0deg); }
  75% { transform: translateY(3px) rotate(-5deg); }
  100% { transform: translateY(0) rotate(0deg); }
}
.map_btn button{
	height: 48px;
}
.list_article_hot{
	width: 100% !important;
}
.btns_interact button{
	margin-left: 10px !important;
}
.ql-editor{
	line-height: 30px !important;
}
.diy_list_box > .col{
	z-index: 9 !important;
}
.ql-toolbar.ql-snow + .ql-container.ql-snow{
	height: calc(100% - 58px) !important;
}
.wallet-recharged-money span.act{
	background: #e13a0c !important;
}
.page_user.exam_view .card_address{
	margin-left: 0 !important;
}